如何从画布上单击删除位图图像 [英] How to remove bitmap image on click from canvas
本文介绍了如何从画布上单击删除位图图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用createjs作为我的框架.我在画布上放置了一个位图,并创建了一个函数来尝试将其删除,但在控制台中不断收到错误消息,提示未定义图像.这是我的代码:
I am using createjs as my framework. I've placed a Bitmap on the canvas and I created a function to try and remove it but I keep getting an error message in the console that image is not defined. This is what my code looks like:
// onload=init() called in html doc
function init(){
var canvas = new createjs.Stage("canvas");
// Add image to canvas
image = new createjs.Bitmap("image.png");
image.x = 200;
image.y = 180;
image.scaleX = 0.35;
image.scaleY = 0.35;
canvas.addChild(image);
image.addEventListener('click', pop);
canvas.update();
}
//remove image from canvas
function pop() {
console.log('pop');
canvas.removeChild(image);
}
当我单击它时,我收到控制台消息"pop",后跟上面提到的错误.我试过将函数移到init内,但似乎出现了同样的问题.
When I click on it, I get the console message "pop" followed by the error I mentioned above. I've tried moving the function inside init but I appear to get the same problem.
推荐答案
将图像设为全局变量,以便案例函数pop
中的所有函数都可以访问它.
Make image as global variable, so that it can be accessed by all the functions in your case function pop
.
var image;// defining 'image' variable as global
function init(){
var canvas = new createjs.Stage("canvas");
// Add image to canvas
image = new createjs.Bitmap("image.png");
image.x = 200;
image.y = 180;
image.scaleX = 0.35;
image.scaleY = 0.35;
canvas.addChild(image);
image.addEventListener('click', pop);
canvas.update();
}
//remove image from canvas
function pop() {
console.log('pop');
canvas.removeChild(image);
}
这篇关于如何从画布上单击删除位图图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文