0

我有以下 JavaScriptmousedown函数，我用它来检测何时对我在 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);
    }

如您所见，每当在画布上绘制对象的部分执行“mousedown”时，此函数都会调用函数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为存储在tips数组中位置的任何内容。index但是，如您所见，在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]

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

据推测，控制台日志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、width、height、x、y），以便我可以访问这些属性以供其他代码位使用。

4

2 回答 2

0

“canvasImage”没有定义，没错！在函数中，你永远不会声明这个对象。而对于“obj”对象，你应该尽量给我们内容……因为那样的话，很难理解这个问题。

于 2013-03-01T13:23:29.127 回答
0

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

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

函数中的“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/

身体{边距：0px；填充：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>

于 2013-03-02T06:10:45.753 回答