拉斐尔JS拖动路径并将其维护在纸上

Question

我是Raphael JS的新手，我对此进行了一些测试。我必须创建一个路径并拖动它。

目前没有问题。

我

真正的问题是我必须限制进入论文的移动。我的道路必须是约束，才能进入我的拉斐尔论文。

(function() {
  var trans_x;
  var trans_y;
  var w = 300;
  var h = 300;
  var paper = Raphael('holder', w, h);
  var rectPath = paper.path("M0, 0L0, 90L90, 90L90, 0Z");
  rectPath.attr({
    fill: "green",
    cursor: "move"
  });
  var bBox = rectPath.getBBox();
  var startPath = function() {
      this.ox = this.attr("x");
      this.oy = this.attr("y");
    },
    movePath = function(dx, dy) {
      trans_x = dx - this.ox;
      trans_y = dy - this.oy;
      this.translate(trans_x, trans_y);
      this.ox = dx;
      this.oy = dy;
    },
    upPath = function() {};

  rectPath.drag(movePath, startPath, upPath);
})();

这是我在小提琴中的基本代码：

http://jsfiddle.net/Drzep/7s8rxhat/4/

我用math.min和math尝试了很多东西.max但没有任何方法适用于路径。我已经找到了如何用拉斐尔圆和矩形来做到这一点，但不是用路径。

Answer 1

我只是简单地重写了你的代码，

我认为你弄乱了变量 bBox，所以我删除了它：

var nowX;
var nowY;
var paper = Raphael(0,0,300,300);
var rect = paper.rect(100, 100, 30, 30).attr({ fill: "blue", cursor: "move" });
var rectPath = paper.path("M0, 0L0, 90L90, 90L90, 0Z").attr({ fill: "green", cursor: "move", stroke: "#fff" });
function start() {
  this.ox = this.getBBox().x;
  this.oy = this.getBBox().y;
};
function move(dx, dy) {
  nowX = Math.min((paper.width - this.getBBox().width), this.ox + dx);
  nowY = Math.min((paper.height - this.getBBox().height), this.oy + dy);
  nowX = Math.max(0, nowX);
  nowY = Math.max(0, nowY);
  if (this.type == "rect") {
    this.attr({ x: nowX, y: nowY });
  }
  else {
    this.transform("T" + nowX + "," + nowY);
  }
};
function up() {
};
rect.drag(move, start, up);
rectPath.drag(move, start, up);

http://jsfiddle.net/crockz/ttfy22fq/