javascript - 在 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 不同时才更新。每次重复的迭代都应该被忽略。如果您也跳过设置 x ，它将按预期开始弹跳。

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

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

https://jsfiddle.net/4k5z0avu/