两个矩形中的坐标更新-Javascript

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

我有多个对象，但我想为每个对象显示不同的坐标

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

---

是的，浏览器将始终为双击触发

单击

和

dblclick

事件

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

解决方案总是这样：

• 暂停执行一键代码一小段时间（200-400ms）
• 在第一次单击被挂起时，侦听其他单击
• 如果没有额外的点击，执行代码进行一次点击
• 如果再次单击，请执行双击代码

下面是Jacek Becela的一个要点，它扩展了jQuery以根据用户是单击还是双击执行单独的回调：

扩展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")
})

---

如果只想更新使用鼠标事件绘制的矩形的坐标，可以执行以下操作：

它向Box2添加了一个name参数，鼠标绘制的框的名称将为“initialBox”。然后在拖动时验证名称。在本例中，所有双击创建的框都称为“otherBox”，但您也可以在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;
}

---

嗨@axelstudios我有个问题。如果我想更新文本框中双击矩形的坐标。我做了这样的事。但它不起作用。你能告诉我哪里出错吗？我检查了creationDrag是否设置为true，ROI是否设置为False。实际上我有3种矩形，我必须分别存储它们的坐标。你的更改非常接近-这是一个区分大小写的问题。我将

otherbox

更改为

otherbox

：我是否可以限制启用选择手柄以增加或减少高度，因为只有1和6个选择点可以工作。rest应该只在一种情况下禁用？？当然，只需为每种情况的

开关（expectResize）

块添加一些逻辑，以检查锚是否可以移动。嗨，我有一个问题。如果我想更新文本框中双击矩形的坐标。我做了这样的事。但是它不起作用jsfiddle.net/HA8aP/3你能告诉我哪里出了问题吗

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

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