在 Raphael JS 中拖动一个矩形来回反弹答案

【问题标题】：Dragging a rectangle in Raphael JS bounces back and forth在 Raphael JS 中拖动一个矩形来回反弹
【发布时间】：2019-11-26 17:10:50
【问题描述】：

在这个jsFiddle 中，我有一个带有矩形的 Raphael JS 网格，我需要将其移动到网格上。矩形的每个角都有四个红色手柄，当它移动时，手柄也会移动。

到目前为止，我可以移动矩形（效果很好），但是当我尝试将它向左移动时，矩形会闪烁并来回反弹。问题可能是我在拖动move 函数内设置了x 矩形坐标吗？任何想法将不胜感激。

   var move = function(dx, dy) {
    rect.attr("x", ox + dx);
    rect.attr("y", oy + dy);
    leftTop.attr("x", ox1 + dx);
    leftTop.attr("y", oy1 + dy);
    rightTop.attr("x", ox2 + dx);
    rightTop.attr("y", oy2 + dy);
    leftBottom.attr("x", ox3 + dx);
    leftBottom.attr("y", oy3 + dy);
    rightBottom.attr("x", ox4 + dx);
    rightBottom.attr("y", oy4 + dy);

    if ((dx - lastdx) < 0)
        seeMoveLeft(rect, leftTop, rightTop,
                 leftBottom, rightBottom);

    lastdx = dx; 

};

var up = function() {};

rect.drag(move, start, up);


var seeMoveLeft = function (rect, leftTop, rightTop,
                 leftBottom, rightBottom){
    var left = rect.attr('x');
    // find next left grid
    var found = false;
    var min = left - 40;
    for (var i=left; i>=min; i--){
       if (i % 40 == 0) {
          found = true;
          break;
       }
    }

    if (found) {
        var diff = left - i;
        rect.attr('x', i);
        var lt = leftTop.attr('x');
        leftTop.attr('x', lt - diff);
        var rt = rightTop.attr('x');
        rightTop.attr('x', rt - diff);
        var lb = leftBottom.attr('x'); 
        leftBottom.attr('x', lb - diff);
        var rb = rightBottom.attr('x');
        rightBottom.attr('x', rb - diff);

    }

}

【问题讨论】：

标签： javascript raphael

【解决方案1】：

问题是你在这里设置了 rect 的新 x：

rect.attr("x", ox + dx);

那你在这里修改一下：

if ((dx - lastdx) < 0)
        seeMoveLeft(rect, leftTop, rightTop,
                 leftBottom, rightBottom);

但由于移动功能基于 mousemove 事件，有时，您会连续 2 次获得相同的 dx 值。这对于 mousemove 事件是正常的，尤其是在您移动缓慢的情况下。你可以在下面试试，每次clientX不变，窗口就会变成绿色。

var lastClientX;
window.addEventListener('mousemove', (e) => {

  if (lastClientX && e.clientX === lastClientX) {
    document.body.style.backgroundColor = 'green';
  } else {
    document.body.style.backgroundColor = 'yellow';
  }

  lastClientX = e.clientX;

})

body {
  width: 100%;
  height 100%;
}

当您有 2 个连续相同的 dx 时，您的情况会发生什么，x - lastdx 不会验证，因此位置不会调整，将保持在 rect.attr("x", ox + dx);。所以第一个 move 事件，位置用 seeMoveLeft 调整到网格，接下来，位置改变但不调整，因为 dx 不小于 lastdx，它是平等的。因此，您会看到闪烁。

最简单的更正方法是，如果 dx 与 lastdx 相同，则跳过定位。像这样：

if(lastdx !== dx){
    rect.attr("x", ox + dx);
    leftTop.attr("x", ox1 + dx);
    rightTop.attr("x", ox2 + dx);
    leftBottom.attr("x", ox3 + dx);
    rightBottom.attr("x", ox4 + dx);
  }

https://jsfiddle.net/ce7sh9ov/1/

【讨论】：