每个左坐标仅检测一次 Raphael 中的对齐网格答案

【问题标题】：Detect snap to grid in Raphael only once per left coordinate每个左坐标仅检测一次 Raphael 中的对齐网格
【发布时间】：2019-11-30 20:04:03
【问题描述】：

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

如果你看一下控制台日志，你会看到矩形捕捉到 same 垂直线很多次，在我的代码中我需要得到此事件每条垂直线仅一次。

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

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)
   }      
}

【问题讨论】：

嘿，接受的答案怎么可能得不到赏金？坏了吗？
您需要等待 24 小时才能获得赏金，再等两个小时......
哦，我不知道授予赏金与批准是分开的，并且有其自身的限制。感谢您的信息！

标签： javascript raphael

【解决方案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/

【讨论】：