在'中绘制图像；网格'；使用JavaScript和KineticJS库在HTML5画布上进行布局

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

我有一个名为

drawImage（imageObj）

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

My

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

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

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

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

x: xPos(randomXPosition),

我不明白为什么会这样-有人有什么想法吗？我想我在线路上也会有同样的错误

x: xPos(getRandomXPosition),

y: yPos(getRandomYPosition),

x: xPos(randomXPosition),

出于同样的原因

我知道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(getRandomXPosition),

y: yPos(getRandomYPosition),

x: xPos(randomXPosition),

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

任何建议都将不胜感激

于2013年1月28日18:05编辑

好的，我想我知道为什么所有的图像都在左上角绘制-调用的

drawImage

函数是来自KineticJS库的函数，而不是我自己的函数。我使用的是我在本地保存的库的副本，因为我对库提供的功能做了一些更改。将创建位置数组并从这些位置选择随机元素的代码复制到库中的drawImage函数中是否有意义

编辑日期：2013年1月29日23:15

好的，我已经看过kineticJS库中的drawImage函数（我正在使用库的本地副本），它看起来像这样：

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

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

做什么？我以前没有见过这个“切片”函数

---

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

xPos是一个数组，因此需要使用数组格式来获取其元素，如xPos[key]， 而randomXPosition是一个函数，您需要执行它来获得它的返回值，就像randomXPosition（）

总之,

X: xPos[randomXPosition()],

---

xPos是一个数组，因此需要使用数组格式获取其元素，如xPos[key]， 而randomXPosition是一个函数，您需要执行它来获得它的返回值，就像randomXPosition（）

总之,

X: xPos[randomXPosition()],

---

要访问数组中的某个索引，必须使用[]not（），如下所示：

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

xPos[randomXPosition]//如果randomXPosition=1，则这将为您提供xPos[1]处的值。
xPos（randomXPosition）//要访问数组中的某个索引，必须使用[]not（），如下所示：

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

xPos[randomXPosition]//如果randomXPosition=1，则这将为您提供xPos[1]处的值。
xPos（randomXPosition）//啊，好吧，这是有道理的——完全错过了我在那里做错的事情！我将两行更改为
x:xPos[randomXPosition（）]，y:yPos[randomYPosition（）]，
，正如您所建议的，但是，现在所有的图像都绘制在画布的左上角，彼此重叠-我猜这意味着我的逻辑有问题，我需要更新函数末尾的
randomXPosition
和
randomYPosition
的值？这样，每次调用函数时，这些变量都应该包含新值-这有意义吗？啊，好的，有意义-完全忽略了我在那里做错的事情！我将两行更改为
x:xPos[randomXPosition（）]，y:yPos[randomYPosition（）]，
，正如您所建议的，但是，现在所有的图像都绘制在画布的左上角，彼此重叠-我猜这意味着我的逻辑有问题，我需要更新函数末尾的
randomXPosition
和
randomYPosition
的值？这样，每次调用函数时，这些变量都应该包含新值-这有意义吗？