JavaScript-如何使用'mousedown'来'选择'画布上的图像

我有以下JavaScript mousedown函数，我正在使用它来检测何时在其中一个图像上执行了'mousedown'我已经显示HTML5画布上：JavaScript-如何使用'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到任何存储的内容在该位置处。然而index的tips阵列中，你可以看到，在displayTip函数结束时，我有线

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

，并在mousedown函数结束，我也行

console.log(obj);

这是我的理解，即无论对象是在画布上的点击点检测，将被存储在变量obj，如线

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

但在控制台确定的，该日志在我的displayTip()函数的末尾记录该canvasImage.id是未定义和日志在我的mousedown功能日志的末尾，可变的值是[object Object]

我不知道为什么我的canvasImage.id是不确定的...它应该显示的mousedown已在...任何想法检测为什么这是不会发生的图像的ID属性？

据推测，控制台日志value of variable obj:[object Object]意味着mousedown在mousedown的位置处已经“抓住”了图像 - 所以它应该显示该对象的id不应该是它？

编辑2013年1月3日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），以便我可以访问这些属性供其他位代码使用。

来源

2013-03-01 someone2088

http://stackoverflow.com/questions/10001283/html5-canvas-how-to-handle-mousedown-mouseup-mouseclick – Ziinloader 2013-03-01 11:45:18

这并不真的回答我问过的问题...... – someone2088 2013-03-01 11:59:14

“canvasImage”未定义，它是正确的！在函数中你永远不会声明这个对象。对于“obj”对象，您应该尝试给我们内容......因为这样，很难理解这个问题。

来源

2013-03-01 13:23:29 Metal3d

“canvasImage”已被定义为全局变量，在文件的开始处有一行'var canvasImage;'...您对“obj”的上下文有何意义？ - 它的全部用处都在原始文章的代码示例中，所以这就是fu上下文。我将在代码中添加“canvasImage”现在定义的位置。 – someone2088 2013-03-01 14:36:21

好的，但你说“obj是[对象对象]”我的意思是说，这个对象的内容可以帮助你。 – Metal3d 2013-03-01 14:45:06

我已经添加了代码来显示我定义'canvasImage'的位置。 – someone2088 2013-03-01 14:45:12

下面是如何在鼠标事件

只需订阅您感兴趣的鼠标事件，并提供一个功能对事件调用访问图像的属性。。

“此”对象的功能是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/

body {margin：0px; padding：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-02 06:10:45 markE

JavaScript-如何使用'mousedown'来'选择'画布上的图像

回答

相关问题