我在我的网站上使用 KineticJS 库，为我正在制作的 HTML5 画布游戏添加一些功能。
我正在使用库在画布上绘制一些图像，但它并没有像我希望的那样绘制图像。
我正在绘制的图像都存储在一个数组中，并且当前都被绘制到画布上。但是，它们都被绘制在彼此之上，在同一个位置。这在理论上很好，因为用户可以在画布周围拖放图像，所以他们可以通过这样做来查看它们。但是，它对用户不是特别友好，因为我在画布上绘制了大约 30 张图像，因此用户必须单独移动它们才能同时看到它们并不是特别有用。
我正在使用我在本地保存的 KineticJS 库的一个版本，因为我想对其提供的功能进行一两个更改。
我用来绘制图像的库中的函数如下所示：
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(a.length === 6) {
context.drawImage(a[1], a[2], a[3], a[4], a[5]);
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
context.restore();
}
并且此函数将所有图像绘制在彼此的顶部，所有图像都位于同一位置（画布的左上角）。
我想编辑此函数，以创建将绘制数组中图像的位置的“网格”。是否将多个图像绘制到同一个网格单元无关紧要，但至少在多个位置会有图像。
我曾尝试使用我编写的函数来执行此操作 - 我的函数在单独使用时可以工作，但是当我尝试将它与库一起使用时，它就不起作用了。所以，我想知道是否可以在库中编辑 drawImage 函数，以包含我编写的用于创建“网格”布局以绘制图像的代码。
我为在网格布局中绘制图像而编写的函数如下所示：
function drawImage(imageObj) {
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* Now select a random X & Y position from the arrays to draw the images to */
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
/* puts the images in random locations on the canvas
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
}
此函数使用 X 和 Y 位置创建画布坐标的网格布局，然后在将每个图像绘制到画布时将 X 和 Y 坐标数组中的随机元素分配给每个图像的 X 和 Y 值 - 确保绘制每个图像在我已确定的可能位置列表中的随机位置的画布上。
我想知道的是如何将我编写的函数提供的功能添加到drawImage库中的函数中？
我尝试将我的代码复制并粘贴到库中的函数中，例如：
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(a.length === 6) {
context.drawImage(a[1], a[2], a[3], a[4], a[5]);
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* Now select a random X & Y position from the arrays to draw the images to */
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
/* puts the images in random locations on the canvas
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
context.restore();
}
但是在执行此操作后在浏览器中查看页面时，画布不再出现在页面上，并且出现控制台错误：“ReferenceError: imageObj is not defined”就行了image: imageObj,。
我不知道为什么会这样，或者如何解决它。有没有人有什么建议？
编辑 30/01/2013 @ 16:10
我已经尝试按照建议编辑代码，drawImage 函数现在看起来像这样：
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
/*Create the arrays to hold the grid coordinates I want to use */
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: a[1],
width: 50,
height: 50,
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
});
canvasImage.on('mouseover', function(){/*Define any handlers I want*/});
imagesLayer.add(canvasImage);
}
但是，尽管现在显示了画布，但图像却没有——图像之前出现的地方有一个方形的“轮廓”（当它们都被绘制到一个位置时），所以我认为那是图像，但它们不显示为图像 - 只是一个正方形，它们仍然都在同一个位置。
当我尝试在画布周围拖放正方形时（假设它是一个图像），画布上的所有其他内容都随着图像移动，并且变得非常缓慢且无响应。
例如，这是我的页面的屏幕截图：
我在编辑代码的方式上做错了什么吗？