通过数字输入更改对象属性（左、上、半径等）后的奇怪 "mouse:over" 行为

Question

我对 JavaScript 编程和 FabricJS 还很陌生（我现在只学习了大约一个月）所以请多多包涵。

我正在尝试使用 FabricJS 创建一个用户界面，其基本功能如下所述：

用户创建了一个新的圈子对象
用户select创建的圈子对象
用户可以使用边界框修改 selected 对象（像往常一样）
在 select 编辑圆形对象后，位于 canvas 旁边的侧边栏会使用 selected 对象的参数动态更新（在本例中为 X（左)、Y（顶部）和半径参数）。为此，用户需要在右侧的输入框中输入新的所需值，然后单击“更新”按钮。

这由 switch case 处理：

 case 'circle':
      if (rows <= 1) {
        //------------------------------PARAMETER VARIABLES-----------------------------------------------------
        var x = Math.round(activeObj.get("left"));
        var y = Math.round(activeObj.get("top"));
        var r = Math.round(activeObj.get("radius"));
        //------------------------------DYNAMIC PARAMETERS------------------------------------------------------
        $('#parameter_input_table tbody').append("<tr><td>X</td><td><input type=\"text\" id=\"x_table\" value=\"" + x + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td>Y</td><td><input type=\"text\" id=\"y_table\" value=\"" + y + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td>R</td><td><input type=\"text\" id=\"r_table\" value=\"" + r + "\"></td></tr>");
        $('#parameter_input_table tbody').append("<tr><td><button id=\"btn_submit\">Update</button></td></tr>")

        //------------------------------HANDLERS------------------------------------------------------------------
        //add event listeners for numeric input
        $('#parameter_input_table tbody tr td input').eq(0).on('input', function() {
          x = this.value;
          activeObj.set({
            left: x
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr td input').eq(1).on('input', function() {
          y = this.value;
          activeObj.set({
            top: y
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr td input').eq(2).on('input', function() {
          r = this.value;
          activeObj.set({
            radius: r
          });
          activeObj.setCoords();
          canvas.requestRenderAll();
        });
        $('#parameter_input_table tbody tr #btn_submit').on('click', function() {
          activeObj.set({
            left: x,
            top: y,
            radius: r
          });
          activeObj.setCoords();
          canvas.discardActiveObject().requestRenderAll();
        });
      }
      break;

此外，用户可以通过按键盘上的“Delete”键删除当前select编辑的对象。

我创建了一个工作 Fiddle，其中基本上实现了上述所有功能。

Fiddle: Changing FabricJS object parameters using numeric input

但是，我运行遇到了一个奇怪的问题，即通过数字输入更新值会导致光标在 “错误” 处变为移动光标尽管在修改对象后调用了 setCoords() 仍放置。

自己试试吧，你会明白我的意思：打开Fiddle、select默认圆圈，更改右侧的值并点击更新。您可能会看到光标以某种方式做出反应，就好像“鼠标悬停”事件是在新圆圈的假定边界框之外触发的。

当前解决方法：

拖动对象或
重新select对象，点击更新

但显然这不是一个好的解决方法。

我也试过删除 activeObject 并在更新按钮后创建一个新对象，其值保存在 x、y 和 r 中。问题仍然存在。

如果有人可以帮助我解决此问题 issue/direct 我进行现有的讨论（如果这个问题之前已经出现过），我将不胜感激。

Answer 1

当使用来自输入的值时，您需要使用 parseInt() 将值从字符串转换为整数。

x = parseInt(this.value);
activeObj.set({
   left: x
});

通过数字输入更改对象属性（左、上、半径等）后的奇怪 "mouse:over" 行为

Strange "mouse:over" behavior after changing object attributes (left, top, radius etc.) via numeric input

fabricjs