使用 Kinetic 在 Canvas 上添加更多图像答案

【问题标题】：Add more images on Canvas with Kinetic使用 Kinetic 在 Canvas 上添加更多图像
【发布时间】：2013-03-27 20:39:17
【问题描述】：

我正在制作一个应用程序，但我遇到了问题。当我点击按钮时，我需要在我的画布上添加新点（图像）。这是一个代码：

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)

你有什么想法，有什么问题吗？谢谢回答。艾伦..

【问题讨论】：

标签： javascript jquery html canvas kineticjs

【解决方案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
});

【讨论】：

你应该让这个函数的所有内容都在全局范围内

【解决方案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();
}

【讨论】：