我正在开发一个绘图应用程序，它允许用户绘制像嘟嘟一样的霓虹灯。大多数功能都有效 - 但我遇到了“撤消”功能的问题。我尝试从drawingcanvas中删除最后一个孩子 - 但它没有任何区别
// 画布代码 //
var app ={
stage:null,
stagetools:null,
erase:0,
container:null,
loader:null,
stageArea:null,
backgroundContainer:null,
backgroundBounds:null,
oldPt:0,
oldMidPt:0,
midPt:0,
NUM_LINES: -1,
manifest:[],
toolsAssets:[],
lineArray:[],
lineArray2:[],
lineArray3:[],
filters2:[],
filters:[],
mouseDOWN:false,
bgscale:true,
maskFilter:null,
init: function(chosenNum){
//setup
this.stagetools = new createjs.Stage('canvasTools');
this.stagetools.enableDOMEvents(true);
this.stagetools.enableMouseOver(10);
createjs.Touch.enable(this.stagetools);
this.stage = new createjs.Stage('canvas');
this.stage.autoClear = true;
this.stage.enableDOMEvents(true);
this.stage.snapToPixelEnabled = true;
this.stage.enableMouseOver(10);
createjs.Touch.enable(this.stage);
createjs.Ticker.setFPS(5000);
createjs.Ticker.addEventListener('tick', this.tick);
//loader
this.manifest = [
{src:'images/brush.png', id:'brush', link: 'tool'},
{src:'images/undo.png', id:'undo', link: 'tool'},
{src:'images/eraser.png', id:'eraser', link: 'tool'},
{src:'images/clear.png', id:'clear', link: 'tool'}
];
switch(chosenNum)
{
case 0: this.manifest.push({src:'images/NeonCanvases-image1.jpg',id:'fc0', link:'car'}); break;
case 1: this.manifest.push({src:'images/NeonCanvases-image2.jpg',id:'fc1', link:'car'}); break;
case 2: this.manifest.push({src:'images/NeonCanvases-image3.jpg',id:'fc2', link:'car'}); break;
case 3: this.manifest.push({src:'images/NeonCanvases-image4.jpg',id:'fc3', link:'car'}); break;
case 4: this.manifest.push({src:'images/NeonCanvases-image5.jpg',id:'fc4', link:'car'}); break;
case 5: this.manifest.push({src:'images/NeonCanvases-image6.jpg',id:'fc5', link:'car'}); break;
default: this.manifest.push({src:'images/NeonCanvases-image1.jpg',id:'fc0', link:'car'}); break;
}
console.log("v3");
this.loader = new createjs.LoadQueue();
this.loader.on('complete', this.handleComplete);
this.loader.on("fileload", this.handleFileLoad);
this.loader.loadManifest(this.manifest);
var drawingsArray = [];
this.stage = new createjs.Stage('canvas');
//__add car background
this.backgroundContainer = new createjs.Container();
this.stage.addChild(this.backgroundContainer);
//stage.enableDOMEvents(true);
createjs.Touch.enable(this.stage);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', this.stage);
//__the drawing space
this.stageArea = new createjs.Container();
this.stageArea.snapToPixelEnabled = true;
this.stageArea.hitArea = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,960,window.innerHeight));
this.stageArea.cache(0,0,960,window.innerHeight); // Cache it.
this.stage.addChild(this.stageArea);
//__resolve container with tool kit.
this.container = new createjs.Container();
this.stage.addChild(this.container);
/*
// Create the shape to draw into
this.drawing = new createjs.Shape();
this.drawing.shadow = new createjs.Shadow('#0066cc',1, 1, 30);
this.stageArea.addChild(this.drawing);
*/
this.erase = 0;//initially its a fill pen
this.lastPoint = new createjs.Point();
var that = this;
this.stageArea.addEventListener("mousedown", function(event) {
// Store the position. We have to do this because we clear the graphics later.
that.lastPoint.x = event.stageX;
that.lastPoint.y = event.stageY;
});
// Listen for mousemove
this.stageArea.addEventListener("pressmove", function(event){
console.log("pressmove");
var drawingCanvas = new createjs.Shape();
drawingCanvas.shadow = new createjs.Shadow('#0066cc',1, 1, 30);
app.stageArea.addChild(drawingCanvas);
// Draw a round line from the last position to the current one.
drawingCanvas.graphics.setStrokeStyle(tools.size, "round", "round");
drawingCanvas.graphics.beginStroke(tools.COLOUR);
drawingCanvas.graphics.moveTo(that.lastPoint.x, that.lastPoint.y);
drawingCanvas.graphics.lineTo(event.stageX, event.stageY);
// Draw a round line from the last position to the current one.
drawingCanvas.graphics.clear();
//__white line
drawingCanvas.graphics.setStrokeStyle(tools.size, "round", "round", 1, true);
drawingCanvas.graphics.beginStroke('#fff');
drawingCanvas.graphics.moveTo(that.lastPoint.x, that.lastPoint.y);
drawingCanvas.graphics.lineTo(event.stageX, event.stageY);
//__white line
//set shadows
drawingCanvas.shadow = new createjs.Shadow(tools.COLOUR,1, 1, 30);
// Update the last position for next move.
that.lastPoint.x = event.stageX;
that.lastPoint.y = event.stageY;
// Draw onto the canvas, and then update the container cache.
app.stageArea.updateCache(app.erase?"destination-out":"source-over");
drawingCanvas.graphics.clear();
});
},
handleFileLoad:function(e){
app.toolsAssets.push(e);
},
handleComplete:function(){
tools.init();
//background
for(var i = 0; i < app.toolsAssets.length; i++){
if(app.toolsAssets[i].item.link == "car"){
var imgLoader = app.loader.getResult(app.toolsAssets[i].item.id);
var img = new createjs.Bitmap(imgLoader);
app.backgroundBounds = img.getBounds();
app.backgroundContainer.addChild(img);
img.cache(0,0, img.getBounds().width, img.getBounds().height);
}
}
resize();
},
tick:function(){
//console.log("ticks");
}
}
var tools = {
selectedArray:[],
undoArray:[],
undoArray2:[],
undoArray3:[],
palettes: ['#0066cc', '#0ceaed', '#00ff2a', '#de00ff', '#f40045', '#d8ff00','#ff8400','#7d36ff'],
sizes:[6, 10, 15],
colourPallette:null,
paletteColours: null,
brushSizes:null,
toolsContainer:null,
size: 8,
toolsScale:1,
COLOUR: '#0066cc',
SELECTED:0,
eraser: false,
init:function(){
//colour pallette
this.toolsContainer = new createjs.Container();
this.toolsContainer.x = app.stagetools.canvas.width/2 - 150;
this.toolsContainer.y = app.stagetools.canvas.height/2 + 10;
app.stagetools.addChild(this.toolsContainer);
this.colourPallette = new createjs.Shape();
this.colourPallette.name = 'colourPallette';
this.colourPallette.graphics.beginFill(tools.COLOUR);
this.colourPallette.graphics.setStrokeStyle(4, 'round').beginStroke("#FFFFFF");
this.colourPallette.graphics.drawCircle(0,0,22);
this.colourPallette.addEventListener('click', this.palletteHandler);
this.toolsContainer.addChild(this.colourPallette);
this.paletteColours = new createjs.Container();
this.paletteColours.visible = false;
this.toolsContainer.addChild(this.paletteColours);
for(var i = 0; i < this.palettes.length; i++){
var palette = new createjs.Shape();
palette.name = 'palette' + i;
palette.graphics.beginFill(this.palettes[i]);
palette.graphics.drawCircle(0,0,15);
palette.addEventListener('click', this.palletteHandler);
palette.x = (i * 50);
palette.y = -50;
this.paletteColours.addChild(palette);
}
//brush tool
var brush = new createjs.Bitmap(app.loader.getResult('brush'));
brush.name = 'brush';
brush.x = 50;
brush.y = -34;
brush.addEventListener('click', this.brushHandler);
this.toolsContainer.addChild(brush);
this.brushSizes = new createjs.Container();
this.brushSizes.x = brush.x + 40;
this.brushSizes.y = brush.y - 20;
this.brushSizes.visible = false;
this.toolsContainer.addChild(this.brushSizes);
for(var p = 0; p < this.sizes.length; p++){
var size = new createjs.Shape();
size.name = 'size'+p;
size.graphics.beginFill('#FFFFFF');
size.graphics.drawCircle(0,0,this.sizes[p]);
size.addEventListener('click', this.brushHandler);
size.x = (p==1) ? p * 40 : p * 45;
this.brushSizes.addChild(size);
}
//undo tool
var undo = new createjs.Bitmap(app.loader.getResult('undo'));
undo.name = 'undo';
undo.x = brush.x + 90;
undo.y = brush.y;
undo.addEventListener('click', this.undoHandler);
this.toolsContainer.addChild(undo);
//eraser tool
var eraser = new createjs.Bitmap(app.loader.getResult('eraser'));
eraser.name = 'eraser';
eraser.x = undo.x + 90;
eraser.y = undo.y;
eraser.addEventListener('click', this.eraserHandler);
this.toolsContainer.addChild(eraser);
//trash tool
var clear = new createjs.Bitmap(app.loader.getResult('clear'));
clear.name = 'clear';
clear.x = eraser.x + 90;
clear.y = eraser.y;
clear.addEventListener('click', this.clearHandler);
this.toolsContainer.addChild(clear);
},
brushHandler:function(e){
tools.paletteColours.visible = false;
tools.brushSizes.visible = false;
switch(e.target.name)
{
case 'size0': tools.size = 6; break;
case 'size1': tools.size = 10; break;
case 'size2': tools.size = 15; break;
case 'brush': tools.brushSizes.visible = true; break;
}
app.stagetools.update();
},
palletteHandler:function(e){
tools.paletteColours.visible = false;
tools.brushSizes.visible = false;
switch(e.target.name)
{
case 'colourPallette': tools.paletteColours.visible = true; break;
case 'palette0':
tools.SELECTED = 0;
tools.COLOUR = '#0066cc';
break;
case 'palette1':
tools.SELECTED = 1;
tools.COLOUR = '#0ceaed';
break;
case 'palette2':
tools.SELECTED = 2;
tools.COLOUR = '#00ff2a';
break;
case 'palette3':
tools.SELECTED = 3;
tools.COLOUR = '#de00ff';
break;
case 'palette4':
tools.SELECTED = 4;
tools.COLOUR = '#f40045';
break;
case 'palette5':
tools.SELECTED = 5;
tools.COLOUR = '#d8ff00';
break;
case 'palette6':
tools.SELECTED = 6;
tools.COLOUR = '#ff8400';
break;
case 'palette7':
tools.SELECTED = 7;
tools.COLOUR = '#7d36ff';
break;
}
tools.colourPallette.graphics.beginFill(tools.COLOUR);
tools.colourPallette.graphics.drawCircle(0,0,22);
app.stagetools.update();
},
eraserHandler: function(){
console.log("erase");
app.erase = 1 - app.erase;
},
undoHandler:function(){
console.log("undo bit");
if(app.stageArea.children.length > 1){
var lastChild = app.stageArea.children.pop(1);
app.stageArea.removeChild(lastChild);
app.stage.update();
}
},
clearHandler:function(e){
console.log("clear");
app.stageArea.removeAllChildren();
app.stageArea.updateCache();
app.stage.update();
},
}
function resize(){
app.stage.canvas.width = $('#canvas').parent().width();
//app.stage.canvas.height = window.innerHeight;
app.stagetools.canvas.width = $('#canvas').parent().width();
//tools container
if(app.stage.canvas.width < 960){
app.stage.canvas.height = '960';
}
if(app.stage.canvas.width < 860){
app.stage.canvas.height = '860';
}
if(app.stage.canvas.width < 760){
app.stage.canvas.height = '760';
}
if(app.stage.canvas.width < 660){
app.stage.canvas.height = '660';
}
if(app.stage.canvas.width < 560){
app.stage.canvas.height = '560';
}
if(app.stage.canvas.width < 460){
app.stage.canvas.height = '460';
}
if(app.stage.canvas.width < 300){
app.stage.canvas.height = '300';
tools.toolsScale = 0.7;
}
tools.toolsContainer.scaleX = tools.toolsScale;
tools.toolsContainer.scaleY = tools.toolsScale;
tools.toolsContainer.x = app.stagetools.canvas.width/2 - 150 * tools.toolsScale;
//content scale
app.container.scaleX = app.bgscale;
app.container.scaleY = app.bgscale;
app.container.x = app.stage.canvas.width/2;
app.container.y = app.stage.canvas.height/2;
//background image
app.bgscale = app.stage.canvas.width / app.backgroundBounds.width;
if(app.backgroundBounds.height * app.bgscale > app.stage.canvas.height){
app.bgscale = app.stage.canvas.height / app.backgroundBounds.height;
}
app.backgroundContainer.scaleX = app.bgscale;
app.backgroundContainer.scaleY = app.bgscale;
app.backgroundContainer.x = Math.floor(app.stage.canvas.width/2 - app.backgroundBounds.width/2 * app.bgscale);
app.backgroundContainer.y = Math.floor(app.stage.canvas.height/2 - app.backgroundBounds.height/2 * app.bgscale);
app.stage.update();
app.stagetools.update();
}