Question

我正在尝试获取它，以便通过单击鼠标可以选择画布上的圆圈。这样，用户不必按住鼠标即可移动对象。当我尝试缩放或平移时会出现问题。由于某种原因，该圆圈似乎没有跟随鼠标，而是重置为画布的中心。然后，鼠标和圆会产生很大的偏移。因此，我无法取消选择圆，或者如果可以的话，则手柄不在逻辑上应该位于的位置。我从这里提到的代码开始：https://stackoverflow.com/a/35014746/1053106

我是由a幸发现的奇怪部分。看来，当我注释掉moveObject变量的声明（跟踪我要移动的内容）时，缩放功能可以很好地工作，但是平移仍然是一个问题。但是同样奇怪的是，即使出现异常，它也可以正确缩放。 See this codepen.注释和取消注释第51行以查看行为。每次选择圆圈，然后使用鼠标滚轮放大。我有the Fabric.js tutorial on Zoom and Pan的缩放代码（即使我一生都无法在该页面上获得最终的示例，而在我的代码版本中也没有毛刺……）

取消注释该行，可以在画布上按住Alt和mouseDown进行平移，直到该圆与光标对齐为止，如果该圆与鼠标位置的偏移量太大，则取消选择它。
在注释行的情况下，缩放效果很好，但是平移仍会破坏选择手柄。您必须在画布周围查看该手柄。

下面是我的示例，它显示了缩放本身。首先，我没有声明moveObject，并且缩放使鼠标和圆圈保持对齐。然后声明该变量，并在缩放和移动鼠标时，圆圈似乎重置为画布的中心，使其与鼠标不匹配。我正在运行一个脚本来显示mouseclicks。

Here's my example showing panning，有没有声明该变量。 GIF太大，无法嵌入，因此出现了链接。

此外，我还有一个网格，可以将圆捕捉到。如果我的mouse：move里面有任何代码可以使它捕捉起来，那么这似乎也很奇怪。第147和148行类似于：

movedObject.left=Math.round((opt.e.clientX -( movedObject.width/2) )/ grid) * grid /zoom;
movedObject.top = Math.round((opt.e.clientY - (movedObject.height/2) )/ grid) * grid/zoom;

Answer 1

我只是在mouse：move函数中遍历了所有可能的鼠标位置选项，直到找到可行的方法。我本可以发誓在没有运气之前尝试过所有选项，所以我开始保存结果列表，即

while ($row = mysqli_fetch_array($res))
{
          $dt = new DateTime();
          $dt->setISODate($year, $week);

          $fetch_mID = $row['ID_EMPLOYEE'];
          $fetch_fn = $row['Firstname'];
          $fetch_en = $row['Lastname'];
          echo "<tr>";
            echo "<td>" . $fetch_fn . " " . $fetch_en . "</td>";

            do {
              $obj = new ReflectionObject($dt);
              $pro = $obj->getProperty('date');
              $date = $pro->getValue($dt);
              //new code
              $newformat = date('Y-m-d',strtotime($date));
              echo $newformat; // output 2019-04-05
              // end new code
              $shift = $conn->query("SELECT ShiftDate, ShiftStart, ShiftEnd FROM shifts WHERE ID_EMPLOYEE = '$fetch_mID' AND Date(ShiftDate) = '$date'");
              $fetch = mysqli_fetch_array($shift);
              $dt->modify('+1 day');
            } while ($week == $dt->format('W'));

尝试了各种不起作用的指针位置选项后，我相信找到了答案。解决方案是在计算中使用absolutePosition.x和absolutePosition.y。

pointer.x pointer.y = No Joy  
options.e.layerX and options.e.layerY  = No Joy 
canvas._offset.left, canvas._offset.top   = No Joy 
options.clientX,  options.clientY  = No Joy

现在，无论缩放系数或平移值如何，该部件都会像我想要的那样粘在鼠标指针上。

使用Fabric.js中的自定义对象选择功能进行缩放和平移时鼠标偏移的奇怪问题

1 个答案: