Javascript KineticJS图像函数

我正在使用我网站上的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();


    }

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

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

这个函数将所有图像绘制在彼此的顶部，都在同一位置（画布的左上角）

我想编辑此函数，以创建一个“网格”位置，在该位置将绘制阵列中的图像。如果将多个图像绘制到同一网格单元，这并不重要，但至少会有多个图像位于多个位置

我曾尝试使用我编写的函数来实现这一点——我的函数在单独使用时可以工作，但是当我尝试将其与库一起使用时，它就不起作用了。因此，我想知道是否可以在库中编辑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();


    }

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

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

此函数使用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();


    }

但在执行此操作后，在浏览器中查看页面时，画布不再显示在页面上，并且在

image:imageObj，

行上出现控制台错误：“ReferenceError:imageObj未定义”

我不明白为什么会这样，也不知道如何解决。有人有什么建议吗

编辑2013年1月30日16:10

我已尝试按照建议编辑代码，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();


    }

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

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

然而，尽管画布现在显示了，但图像没有显示-在图像之前出现的地方有一个正方形的“轮廓”（当它们都被绘制到一个位置时），所以我假设这就是图像，但它们没有显示为图像-只是一个正方形，它们仍然都在同一位置

当我尝试在画布周围拖放正方形（假设它是一个图像）时，画布上绘制的所有其他内容都会随着图像移动，并且都变得非常缓慢和无响应

例如，下面是我的页面截图：

---

我编辑代码的方式有什么问题吗？

您的错误是由于您正在引用的javascript对象imageObj没有在代码中的任何地方定义（您已经显示）造成的

注:

var canvasImage = new Kinetic.Image({
  image: imageObj,   // <--- imageObj needs to be created somewhere, it is expecting something like:  var imageObj = new Image();
  width: 50,
  height: 50,
  x: xPos[randomXPosition()],
  y: yPos[randomYPosition()],
  draggable: true

});

新材料： 这是您的功能：

  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]);  //a[1] contains the image object reference
        }
        else {
            context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
        }
    }

    context.restore();
  }

尝试：

随机网格位置：

  function randomGridPosition(){  //10x10 grid
      var width= .9*stage.getWidth()/10;
      var height= .9*stage.getHeight()/10;
      var randomX = Math.floor(10*Math.random()*width); //select random x position dependent on width
      var randomY = Math.floor(10*Math.random()*height); //select random y position dependent on height
      return {x: randomX, y: randomY};
  }

---

谢谢你的回复。从我所看到的，我在复制代码的函数中使用变量

imageObj

的唯一其他地方是在函数定义中，即：

function drawImage（imageObj）{..

那么我应该将库中的函数定义从

drawImage:function（）更改吗{…

to

drawImage:function（imageObj）{…

？我尝试了一下，但是尽管画布现在已经显示出来了，所有的图像都是在上面绘制的。另外，当我点击一个图像将其拖到另一个位置时，除了该图像以外的所有图像都会从画布上消失，并且出现控制台错误：“TypeError:value无法转换为

context.drawImage（a[1]、a[2]、a[3]、a[4]、a[5]）；

a[]数组中存储了什么？老实说，我不太确定-库中的drawImage函数中已经有代码。如果有帮助，a[]数组是在传递到drawImage函数的位置上方声明的。它是使用以下行声明的：

var a=array.prototype.slice.call（参数）

我以前从未见过这种代码……因此我对它的作用一无所知。这里传递到括号中的“arguments”变量首先在这段代码的文件中使用：

for（var I=0；I

但是我看不到任何地方定义了“参数”…我假设它是一个数组？你有没有可能把一个JSIDdle放在一起？我可以更好地帮助你。我可以把一个JSIDdle放在一起-但是记住我使用的kineticjs库几乎有7000行长，它可能有点太大了？但是我可以把一个放在t位上如果你愿意的话，你可以把我的问题相关的库粘贴到某个地方，然后把小提琴链接到它上吗？如果不可以，粘贴整个库。我会滚动到底部找到绘图代码。另外，屏幕截图不是v