Javascript Raphael JS拖动路径并在纸上维护

我是拉斐尔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);

})();

以下是我在Fiddle中的基本代码：

我尝试了很多关于math.min和math.max的东西，但是对于path没有任何效果。

---

我已经找到了如何使用拉斐尔圆和矩形来实现这一点，但没有使用路径。

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

我想你搞乱了变量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);

---

您可以使用setviewBox属性。如果您已经可以使用圆或矩形来执行此操作，您应该能够在任何元素（如路径）上使用getBBox（）方法，以获取要比较的x1、x2、y1、y2点。只需运行getBBox（）并查看输出。感谢您的评论，我以前尝试过使用getBBox，但我发现结果不一致（我想）。你能告诉我Bbox的x和y结果是否正常吗？（Console.log）这里是我的更新：我使用getBBox来设置高度、宽度x和y，但是我的限制没有配置得像我想要的那样好。。。如果有人能帮我的话，我真的不明白形状和路径之间的巨大区别。谢谢Crockz。这是perperct。现在很清楚了。我理解为什么它以前不起作用。我想我在寻找一个使用Bbox太复杂的解决方案。谢谢。