JavaScript-如何使用“鼠标下移”来“选择”画布上的图像

Question

我具有以下JavaScript mousedown函数，该函数用于检测何时在HTML5画布上显示的图像之一上执行了“ mousedown”操作：

_mousedown: function(evt) {
    this._setUserPosition(evt);
    var obj = this.getIntersection(this.getUserPosition());
    if(obj && obj.shape) {
        var shape = obj.shape;
        this.clickStart = true;
        shape._handleEvent('mousedown', evt);
        displayTip(obj.shape.index);

        console.log(obj);
    }

如您所见，每当在画布上绘制了对象的一部分上执行“鼠标按下”时，此函数就会调用函数displayTip 。

displayTip函数当前如下所示：

function displayTip(index){
    document.getElementById('tipsParagraph').innerHTML = tips[index];
    console.log("displayTip being called");
    console.log("canvasImage id = " + canvasImage.id);
}

现在， mousedown函数部分正常工作，因为当它调用displayTip ，此函数tipsParagraph段落tipsParagraph的内容更新为位置index处tips数组中存储的内容，但是如您所见，最后displayTip函数的功能，我已经

`console.log("canvasImage id = " + canvasImage.id);

在mousedown功能的最后，我有一行

console.log(obj);

据我了解，在画布上单击时检测到的任何对象都将存储在变量obj ，由线确定

var obj = this.getIntersection(this.getUserPosition());

但是在控制台中， displayTip()函数末尾的日志记录的是canvasImage.id未定义，而mousedown函数末尾的日志记录的是变量obj值为[object Object]

我不确定为什么我的canvasImage.id是未定义的...它应该显示在其上检测到mousedown的图像的ID属性...为什么没有发生任何想法？

据推测， value of variable obj:[object Object]的控制台日志value of variable obj:[object Object]表示mousedown在mousedown的位置上已经“捕获”了图像-因此它应该显示该对象的ID，不是吗？

编辑01/03/2013 @ 14:35

画布图像的代码如下：

首先使用以下代码行将其定义为文件开头的全局变量，以及所有其他全局变量：

var canvasImage;

下一个用途是在我的“ drawImage（）”函数中，在该函数中，其用法如下：

var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: randomPosition(0, 950),  //imageX,    //stage.getWidth() / 2 - 50 / 2,
      y: randomPosition(30, 350),  //imageY,    //stage.getHeight() / 2 - 50 / 2,
      draggable: true
    });

我不确定这是否是正确的方法，但是我想做的是使用mousedown函数“保持”调用mousedown函数的任何图像，并将该特定图像存储在变量中临时及其所有属性（id，宽度，高度，x，y），以便我可以访问这些属性以供其他代码使用。

Answer 1

没有定义“ canvasImage”，这是正确的！ 在函数中，您永远不会声明此对象。 对于“ obj”对象，您应该尝试向我们提供内容...因为那样，很难理解问题。

Answer 2

这是在鼠标事件期间访问图像属性的方法

只需订阅您感兴趣的鼠标事件并提供调用该事件的函数。

函数中的“ this”对象是Kinetic.Image对象，您可以调用getXXX（）来检索您感兴趣的任何属性。

        myImage.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

这是代码和小提琴： http : //jsfiddle.net/m1erickson/2Qt97/

正文{边距：0像素； 填充：0px; }

  function initStage(images) {

    var stage = new Kinetic.Stage({
      container: 'container',
      width: 300,
      height: 300
    });

    var layer = new Kinetic.Layer();

    var img=new Image();
    var coffee;
    img.onload=function(){
        coffee=new Kinetic.Image({
            x:125,
            y:100,
            name:"Yum!",
            id:"coffeePic",
            image:img
        });
        layer.add(coffee);
        stage.add(layer);

        coffee.on('mouseup', function() {
          var att="Id: "+this.getId();
          att+=", width:"+this.getWidth();
          att+=", height:"+this.getHeight();
          att+=", x:"+this.getX();
          att+=", y:"+this.getY();
          att+=", image:"+this.getImage();
          alert(att);
          console.log(att);
        });

    }
    img.src="http://dl.dropbox.com/u/139992952/coffee.png";

  }
  initStage();

</script>