1

我有一组图像，我想在特定位置绘制到 HTML5 画布（即使用“网格”类型布局）。

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

我的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),

将绘制到画布上的图像的 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 库使图像“可拖动”——只是为了更完整地了解我的代码。

任何建议将不胜感激！

编辑于 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);

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

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

4

2 回答 2

1

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

综上所述 ，

X: xPos[randomXPosition()],
于 2013-01-28T17:05:25.573 回答
0

好吧，要访问数组中的某个索引，您必须使用 [] 而不是 ()，如下所示：

  xPos[randomXPosition] // if randomXPosition = 1, then this gives you the value at xPos[1]. 

  xPos(randomXPosition) // <-- this is a function call, what it is expecting is something like:
  function xPos(number){
     var value = number * Math.random();
     return value; //return some value maybe?
  };
于 2013-01-28T17:05:37.053 回答