每個左坐標僅在 Raphael 中檢測對齊到網格一次

Question

在這個jsFiddle 中，我有一個帶有可以移動的矩形的 Raphael 畫布。 向左移動時，矩形會捕捉到垂直線。

如果您查看控制台日志，您會看到矩形多次捕捉到同一條垂直線，在我的代碼中，我只需要為每條垂直線獲取一次此事件。

例如在日志中你應該看到：

snapped to 280
snapped to 240
snapped to 200

相反，它會多次顯示每一行。

如果我添加這些行：

 if (last_snap == i)
      return;

它為每個快照顯示一條線，但是 rect 來回彈跳。

任何想法如何使這項工作？

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不同時才更新它。 應忽略每次重復的迭代。 如果您也跳過設置x ，它將按預期開始彈跳。

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

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

https://jsfiddle.net/4k5z0avu/