javascript - 使用 JavaScript 和 KineticJS 库在 HTML5 Canvas 上以 'grid' 布局绘制图像

Question

我有一组图像，我想将它们绘制到特定位置的 HTML5 Canvas 上(即使用“网格”类型布局)。

我有一个名为 drawImage(imageObj) 的函数，它当前将数组中的所有图像绘制到 Canvas 上的随机位置。但是，我希望能够预先确定应绘制图像的一组位置，然后随机选择在这些设置位置中的哪个位置绘制哪个图像(如果绘制多个图像也没关系)相同位置)。

我的 drawImage(imageObj) 函数当前如下所示:

function drawImage(imageObj) {
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,



      /* 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);
}

我尝试稍微改变函数来创建位置“网格”，然后将每个图像绘制到网格中的随机“单元格”:

function drawImage(imageObj) {
    /* 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] = 10;
    yPos[1] = 70;
    yPos[2] = 130;
    yPos[3] = 190;
    yPos[4] = 250;
    yPos[5] = 310;
    yPos[6] = 370;
    yPos[7] = 430;

    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(getRandomXPosition),
      y: yPos(getRandomYPosition),
      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 */
    });

我预料到这些行

x: xPos(getRandomXPosition),
y: yPos(getRandomYPosition),

会将绘制到 Canvas 上的图像的 x 和 y 坐标设置为我的“网格”中的随机“单元格”，由 xPos 和 的随机元素确定yPos 数组被设置为要绘制的图像的 x 和 y 值。

但是，当我在浏览器中查看页面时，我收到控制台错误，提示“xPos 不是函数”

x: xPos(getRandomXPosition),

我不明白这是为什么——有人有什么想法吗？我想我也会遇到同样的错误

y: yPos(getRandomYPosition),

出于同样的原因。

我知道 xPos 不是一个函数 - 它是一个数组，我只是尝试检索位置“getRandomXPosition”处的数组元素。

我认为这可能是因为“getRandomXPosition”本身不是 int，它是一个函数，所以我尝试通过将这些函数定义行更改为将其输出存储在变量中:

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;
}

然后更新我使用它们的位置，以便我现在将变量作为参数而不是函数传递:

x: xPos(randomXPosition),
y: yPos(randomYPosition),
draggable: true

但是，当在浏览器中查看页面时，我仍然收到控制台错误，提示“xPos 不是函数”

x: xPos(randomXPosition),

我不明白这是为什么——有人能指出我正确的方向吗？也许还值得一提的是，我使用kineticJS库使图像在绘制到 Canvas 时“可拖动”——只是为了更完整地描述我的代码。

如有任何建议，我们将不胜感激!

编辑于 28/01/2013 @ 18:05

好吧，我想我知道为什么图像都绘制在左上角 - 被调用的 drawImage 函数是 KineticJS 库中的函数，而不是我自己的函数。我使用的是在本地保存的库的副本，因为我对库提供的功能进行了一些更改。将创建位置数组并从这些位置中选择随机元素的代码复制到库中的 drawImage 函数中是否有意义？

编辑于 29/01/2013 @ 23:15

对了，我查看了kineticJS库中的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]);
            }
        }

        context.restore();
    }

我不确定我是否完全理解这里的所有代码......这行是什么

var a = Array.prototype.slice.call(arguments);

在做什么？我以前没见过这个“切片”功能...

谁能指出我将如何编辑此函数以包含我编写的代码，以便通过从坐标数组中随机选择坐标来将所有图像绘制在单独的位置？据推测，我应该能够将此代码复制并粘贴到函数中，但我不确定应该将其放在函数中的哪个位置...有什么建议吗？

Answer 1

xPos 是一个数组，因此需要使用数组格式来获取其元素，如 xPos[key] ，而randomXPosition是一个函数，你需要执行它才能得到它的返回值，比如randomXPosition()。

总而言之，

X: xPos[randomXPosition()],