使用JavaScript和KineticJS库在HTML5画布上以“网格”布局绘制图像

Question

I have an array of images which I want to draw to the HTML5 canvas in specific locations (ie using a 'grid' type layout).

I have a function called drawImage(imageObj) which currently draws all of the images in the array to random locations on the canvas. However, I want to be able to predetermine a set number of locations at which the images should be drawn, and then choose which image is drawn at which of these set locations randomly (it doesn't matter if more than one image is drawn to the same location).

My drawImage(imageObj) function currently looks like this:

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

I tried altering the function slightly to create a 'grid' of locations, and then draw each image to a random 'cell' in the grid:

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

I had expected that the lines

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

would set the x and y coordinates of the image that is being drawn to the canvas to a random 'cell' in my 'grid' determined by which random elements of the xPos and yPos arrays were set as the x and y values of the image that was to be drawn.

However, when I view my page in the browser, I'm getting a console error which says that "xPos is not a function" on the line

x: xPos(getRandomXPosition),

I can't figure out why this is- does anyone have any ideas? I assume I will have the same error on the line

y: yPos(getRandomYPosition),

for the same reason.

I know that xPos is not a function- it is an array, and I am simply trying to retrieve the array element at position 'getRandomXPosition'.

I thought that this might be because 'getRandomXPosition' is not an int itself, it is a function, so I tried storing its output in a variable by changing those function definition lines to:

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

and then updating where I was using them so that I was now passing the variables as parameters instead of the functions:

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

However, when viewing the page in the browser, I am still getting the console error that says that "xPos is not a function" on the line

x: xPos(randomXPosition),

I can't figure out why this is- can anyone point me in the right direction? It's probably also worth mentioning that I'm using the kineticJS library to make the images 'draggable' when they're drawn to the canvas- just to give a more complete picture of my code.

Any advice would be much appreciated!

Edited 28/01/2013 @ 18:05

Ok, I think I know why the images are all being drawn in the top left corner- the drawImage function that is being called is the one from the KineticJS library, not my own one. I am using a copy of the library that I've saved locally, as there are a few things that I have changed regarding the functionality that the library provides. Would it make sense to copy the code creating the arrays of positions and selecting the random elements from those positions into the drawImage function in the library instead?

Edited 29/01/2013 @ 23:15

Right, I've had a look at the drawImage function in the kineticJS library (I'm using a local copy of the library), and it looks like this:

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

I'm not sure that I fully understand all of the code here... What is the line

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

doing? I've not seen this 'slice' function before...

Can anyone point out how I would edit this function to include the code I've written to enable the images all to be drawn in separate locations by selecting the coordinates randomly from the arrays of coordinates? Presumably, I should just be able to copy and paste this code into the function, but I'm not sure where in the function I should put it... any suggestions?

Answer 1

xPos is an array , so you need to use array format to get its element , like xPos[key] , and randomXPosition is a function , you need to execute it to get its return value , like randomXPosition() .

In conclusion ,

X: xPos[randomXPosition()],

Answer 2

Well, to access a certain index in the array you have to use [] not (), like so:

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