Question

我是拉斐尔JS的新手，我测试了一下。我必须创建一个路径并拖动它。

目前没有问题。

我真正的问题是我必须限制进入报纸。我的道路必须限制在我的raphael纸上。

(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尝试了很多东西但是没有什么能用于路径。我已经找到了如何使用raphael圆和rect进行此操作，但没有使用路径。

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/

Raphael JS Drag Path并将其保存在纸上

1 个答案: