Skip to content

Instantly share code, notes, and snippets.

@fred3m
Created March 11, 2015 03:33
Show Gist options
  • Save fred3m/742c87c542e4aa4f9677 to your computer and use it in GitHub Desktop.
Save fred3m/742c87c542e4aa4f9677 to your computer and use it in GitHub Desktop.
An html5 canvas with multiple layers
// Canvas with multiple layers
// copyright 2015 by Fred Moolekamp
// MIT License
initMultiCanvas=function(div,options){
var $div;
if(div instanceof jQuery){
$div=div;
}else{
$div=$(div);
};
var multiCanvas=$.extend(true,{
$div:$div,
//layers:[],
frames:[],
nextId:0,
current_frame:null,
current_frame_idx:0,
width:600,
height:400,
mousedown:false,
canvasMouseDown:function(){},
canvasMouseUp:function(){},
canvasMouseMove:function(){},
addFrame:function(options){
var frame=$.extend(true,{
layers:[],
id:multiCanvas.nextId++,
},options);
multiCanvas.frames.push(frame);
if(multiCanvas.current_frame!==null){
multiCanvas.hide();
};
multiCanvas.current_frame=frame;
multiCanvas.current_frame_idx=multiCanvas.frames.length-1;
return frame;
},
setCurrentFrame:function(frame){
multiCanvas.hide();
if(isNaN(frame)){
multiCanvas.current_frame=frame;
multiCanvas.current_frame_idx=multiCanvas.frame.indexOf(frame);
}else{
multiCanvas.current_frame_idx=frame;
multiCanvas.current_frame=multiCanvas.frames[multiCanvas.current_frame_idx];
};
if(multiCanvas.current_frame.image!==null){
console.log('new file:',multiCanvas.current_frame.image.fileId);
//console.log('image:',multiCanvas.current_frame.image);
}
multiCanvas.show();
},
removeFrame:function(frame){
if(multiCanvas.frames.length>1){
multiCanvas.clear();
var index=0;
if(isNaN(frame)){
index=multiCanvas.frames.indexOf(frame);
}else{
index=multiCanvas.frames[frame];
};
multiCanvas.frames.splice(index,1);
if(multiCanvas.current_frame_idx>index){
multiCanvas.current_frame=multiCanvas.frames[index-1];
setCurrentFrame(multiCanvas.current_frame);
}else if(multiCanvas.current_frame_idx==index){
multiCanvas.current_frame=multiCanvas.frames[index-1];
setCurrentFrame(multiCanvas.current_frame);
}
}else{
alert("MultiCanvas must have at least one frame");
};
},
addLayer:function(options){
options=options || {};
var $canvas=$('<canvas/>')
.mousedown(multiCanvas.canvasMouseDown)
.mouseup(multiCanvas.canvasMouseUp)
.mousemove(multiCanvas.canvasMouseMove);
$canvas[0].mousedown=false;
if(options.hasOwnProperty('canvas')){
$canvas=$(options.canvas);
};
for(prop in options.props){
$canvas.prop(prop,options.props[prop]);
};
for(style in options.css){
$canvas.css(style,options.css[style]);
};
// Force all canvas' to be the same size and at the same location
$canvas
.prop('width',multiCanvas.width)
.prop('height',multiCanvas.height)
.css({
'position':'absolute',
'top':multiCanvas.$div.offset().top+'px',
'left':multiCanvas.$div.offset().left+'px'
});
var layer=$.extend(true,{
canvas:$canvas[0],
visible:true,
// Objects to be displayed on the canvas
// (each one requires a draw function to display it on the canvas)
objects:[],
show:function(){
layer.visible=true;
layer.canvas.style.visibility='visible';
},
draw:function(){
layer.visible=true;
layer.canvas.style.visibility='visible';
for(var i=0;i<layer.objects.length;i++){
layer.objects[i].draw();
}
},
clear:function(){
ctx=layer.canvas.getContext('2d');
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,layer.canvas.width,layer.canvas.height);
ctx.restore();
},
clearAll:function(){
// This will completely reset the canvas state (transformations, stroke styles, etc.)
layer.canvas.width=layer.canvas.width;
},
hide:function(){
layer.visible=false;
layer.canvas.style.visibility='hidden';
}
},options.layer);
//layer.hide();
multiCanvas.$div.append($canvas[0]);
multiCanvas.current_frame.layers.push(layer);
return layer;
},
clear:function(){
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
multiCanvas.current_frame.layers[i].clear();
}
},
clearAll:function(){
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
multiCanvas.current_frame.layers[i].clearAll();
}
},
show:function(){
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
if(multiCanvas.current_frame.layers[i].visible){
multiCanvas.current_frame.layers[i].show();
}
}
},
showAll:function(){
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
multiCanvas.current_frame.layers[i].show();
}
},
hide:function(){
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
//multiCanvas.current_frame.layers[i].hide();
multiCanvas.current_frame.layers[i].canvas.style.visibility='hidden';
}
},
changeProp:function(prop,value){
multiCanvas.current_frame[prop]=value;
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
multiCanvas.current_frame.layers[i][prop]=value;
};
},
changeCanvasProp:function(prop,value){
multiCanvas.current_frame[prop]=value;
for(var i=0;i<multiCanvas.current_frame.layers.length;i++){
multiCanvas.current_frame.layers[i].canvas[prop]=value;
};
}
},options);
return multiCanvas;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment