每个左坐标仅在 Raphael 中检测捕捉到网格一次

Question

在这个 jsFiddle 我有一个拉斐尔 canvas 有一个可以移动的矩形。向左移动时，矩形会捕捉到垂直线。

如果您查看控制台日志，您会看到该矩形捕捉到相同垂直线许多次，在我的代码中，每条垂直线只需要获取一次此事件。

例如在日志中您应该看到：

snapped to 280
snapped to 240
snapped to 200

相反，它会多次显示每一行。

如果我添加这些行：

 if (last_snap == i)
      return;

它为每个快照显示一条线，但是矩形来回弹跳。

关于如何使这项工作有任何想法吗？

var w = 500,
    h = 340;
var paper = Raphael("the_canvas", w, h);

// draw vertical lines
for (var i = 0; i < 14; i++) {
  paper.path('M' + (i * 40) + ' ' + 0 + 'L' + (i * 40) + ' ' + 300).attr({
    'stroke': 'black'
  });
}

var rect = paper.rect(280, 40, 80, 40);
rect.attr({
  'fill': 'black',
  'cursor': 'move'
});


var ox = 0,
    oy = 0,
    lastdx = 0,
    lastdy = 0;
var last_snap = -9999;

var start = function() {
  ox = rect.attr("x");
  oy = rect.attr("y");
};

var move = function(dx, dy) {

  if (lastdx !== dx)
    rect.attr("x", ox + dx);

  rect.attr("y", oy + dy);

  if ((dx - lastdx) < 0) {
      seeMoveLeft(rect);
  }

  lastdx = dx ;
};

var up = function() {};

rect.drag(move, start, up);

var seeMoveLeft = function(rect) {

  var left = rect.attr('x');  
  var found = false;
  var min = left - 40;
  for (var i = left; i >= min; i--) {
    if (i % 40 == 0) {
      found = true;
      break;
    }
  }

 /*  if (last_snap == i)
      return;
  */

  if (found) {
      rect.attr('x', i);
      last_snap = i;
      console.log("snapped to " + i)
   }      
}

Answer 1

仅当 last_snap 与 i 不同时更新 last_snap。每次重复的迭代都应该被忽略。如果您也跳过设置 x，它将按预期开始弹跳。

  if (found) {
      rect.attr('x', i);
      if (last_snap == i) return;

      console.log("snapped to " + i);
      last_snap = i;
   }

https://jsfiddle.net/4k5z0avu/

每个左坐标仅在 Raphael 中检测捕捉到网格一次

Detect snap to grid in Raphael only once per left coordinate

javascript

raphael