如何從畫布上單擊刪除位圖圖像

Question

我正在使用createjs作為我的框架。 我在畫布上放置了一個位圖，並創建了一個函數來嘗試將其刪除，但是在控制台中不斷收到錯誤消息，提示未定義圖像。 這是我的代碼如下所示：

// 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內，但似乎出現了同樣的問題。

Answer 1

這是一個范圍問題。 您在init函數中定義了image ，因此無法通過pop方法訪問它。

有兩個簡單的修復程序。 將var image移到init函數之外，或者使用click目標。

var image;
function init() {
  init = new createjs.Bitmap();
  // etc
}

// OR

function pop(event) {
  stage.removeChild(event.target);
}

在構建JavaScript應用程序時，了解范圍非常重要，因此建議您更好地了解它：)

干杯，

Answer 2

將image設置為全局變量，以便您的case函數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);
}