Question

当矩形在画布中移动时，我正在显示坐标。

我有多个对象，但我想以不同方式显示每个对象的坐标。

检查一下。你必须单击矩形的复选框，然后使用鼠标事件绘制矩形。您可以使用双击来绘制下一个形状。如何在我移动使用鼠标事件创建的矩形而不是双击时确保X和Y的坐标更新。

          mySel.x = mx - offsetx;
        mySel.y = my - offsety;

 $mouse.innerHTML = "(" + mySel.x + "," + mySel.y + ")" ;

     document.getElementById("TextROI_ULx").value=mySel.x;
        document.getElementById("TextROI_ULy").value=mySel.y;

Answer 1

如果您只想更新使用鼠标事件绘制的矩形的坐标，您可以执行以下操作：http://jsfiddle.net/HA8aP/2/

它为Box2添加了一个名称参数，鼠标绘制框的名称将为＆＃34; initialBox＆＃34;。然后在拖动时验证名称。在此示例中，所有双击创建的框都被称为＆＃34; otherBox＆＃34;，但您可以轻松地在addRect函数中为它们提供所有唯一名称，然后为每个框生成唯一的坐标显示。

if (mySel.name == 'initialBox') {
  $mouse.innerHTML = "(" + mySel.x + "," + mySel.y + ")";

  document.getElementById("TextROI_ULx").value = mySel.x;
  document.getElementById("TextROI_ULy").value = mySel.y;
}

Answer 2

是的，浏览器将始终同时触发click和dblclick个事件。

有很多方法可以区分单击和双击。

解决方案总是这样：

暂停执行一小段代码（200-400ms）。
在第一次点击暂停时收听其他点击次数。
如果没有发生其他点击，请执行单击一下的代码。
如果发生其他点击，请执行双击代码。

这是Jacek Becela的一个要点，它扩展了jQuery来执行单独的回调，具体取决于用户是单击还是双击：https://gist.github.com/ncr/399624

扩展jQuery以区分单击和双击：

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

用法：

$("#yourCanvas").single_double_click(
    function(){ console.log("single-click") },
    function(){ console.log("double-click")
})

协调更新矩形-Javascript

2 个答案: