使用動力學在畫布上添加更多圖像

Question

即時製作應用程序，但我遇到了問題。當我點擊一個按鈕時，我需要在畫布上添加新點（圖像）。下面是一個代碼：

var ID = 0; 
var points = []; 

function addPoint(){ 
points.push({id: ID, posX: 0, posY: 0, url: "img/point.png"}); 
ID++; 
showPoints(); 
} 

function showPoints(){ 
var img = new Array(); 
var point = new Array(); 
var stage = new Kinetic.Stage({ 
    container: 'cvsCroatia', 
    width: 574, 
    height: 508 
}); 
var layer = new Kinetic.Layer(); 

for(var j=0; j < ID; j++){ 
    img[j] = new Image(); 
    img[j].src = 'img/point.png'; 
    img[j].onload = (function(){ 
     point[j] = new Kinetic.Image({ 
      x: points[j].posX, 
      y: points[j].posY, 
      image: img[j], 
      width: 13, 
      height: 13, 
      name: img[j], 
      draggable: true 
     }); 
    }); 
    layer.add(point[j]); 

} 
stage.add(layer); 
} 

但我得到了一個錯誤：

Uncaught TypeError: Cannot set property 'index' of undefined (kinetic-v4.4.0.min.js:29)

你有什麼想法，有什麼不好？ Thx尋求答案。艾倫。對於答案

Answer 1

var img = new Array(); // the simplest solution is to make img visible outside your function 
function showPoints(){ 
    // var img = new Array();  // HERE img is a LOCAL variable, only visible to the showPoints() function 
    var point = new Array();   
    var stage = new Kinetic.Stage({ 
    container: 'cvsCroatia', 
    width: 574, 
    height: 508 
}); 

Answer 2

謝謝，我把所有的變量，以在全球範圍內，但不幸的是得到了同樣的錯誤..

var ID = 0; 
var points = []; 

var img = new Array(); 
var point = new Array(); 

function showPoints(){ 
var stage = new Kinetic.Stage({ 
    container: 'cvsCroatia', 
    width: 574, 
    height: 508 
}); 
var layer = new Kinetic.Layer(); 

for(var j=0; j < ID; j++){ 
    img[j] = new Image(); 
    img[j].src = 'img/point.png'; 
    img[j].onload = (function(){ 
     point[j] = new Kinetic.Image({ 
      x: points[j].posX, 
      y: points[j].posY, 
      image: img[j], 
      width: 13, 
      height: 13, 
      name: img[j], 
      draggable: true 
     }); 
    }); 
    layer.add(point[j]); 

} 
stage.add(layer); 
} 

    function addPoint(){ 
points.push({id: ID, posX: 0, posY: 0, url: "img/point.png"}); 
ID++; 
showPoints(); 
}