当旋转或缩放更改时，在 Raphaeljs 中拖动路径

发布于 2024-12-11 01:46:40 字数 1162 浏览 1 评论 0原文

我有一个关于 Raphael JS 库（版本 2.0.0）和拖动路径的能力的问题。我让拖动功能与我的路径一起使用，但是当我更改路径的比例或旋转时，拖动功能失去了所有控制，我的元素到处飞。

我尝试使用draggable-library，但正如我所看到的，它不支持Raphael 2.0.0，因此我无法使用它，因为我在代码中使用Catmull-Rom curveto，这是Raphael的一个新功能2.0.0。

任何帮助将不胜感激！这是我的代码：

paper = Raphael(document.getElementById("holder"), 768, 1024);

var startPath = function () {
  this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
  this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
},
movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.translate(trans_x,trans_y);
  this.ox = dx;
  this.oy = dy;
},
  upPath = function () {
  // nothing special
};

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z";

shape = paper.path(drawing);;
shape.translate(0,0);
shape.scale(1,1);

shape.attr({
  'stroke': '#000000',
  'fill': 'blue',
  'stroke-width': '5',
});

shape.drag(movePath, startPath, upPath);

所以，这是有效的，但是一旦我添加以下代码，它就不起作用：

shape.scale(2,2);
shape.rotate(90);

原文

I have a question regarding the Raphael JS library (version 2.0.0) and the ability to drag my paths around. I get the drag-function to work with my path, but when I am changing the scale or rotation of my path, the drag-function loses all control and my elements flies everywhere.

I have tried to use the draggable-library, but as I can see it does not support Raphael 2.0.0 and therefore I can't use it, since I am using Catmull-Rom curveto in my code which is a new feature in Raphael 2.0.0.

Any help would be greatly appreciated! Here is my code:

paper = Raphael(document.getElementById("holder"), 768, 1024);

var startPath = function () {
  this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx");
  this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy");
},
movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.translate(trans_x,trans_y);
  this.ox = dx;
  this.oy = dy;
},
  upPath = function () {
  // nothing special
};

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z";

shape = paper.path(drawing);;
shape.translate(0,0);
shape.scale(1,1);

shape.attr({
  'stroke': '#000000',
  'fill': 'blue',
  'stroke-width': '5',
});

shape.drag(movePath, startPath, upPath);

So, this is working, but as soon as i add for example the following code it is not working:

shape.scale(2,2);
shape.rotate(90);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

窝囊感情。 2024-12-18 01:46:40

Raphael 2.0使用SVG矩阵，translate方法仅将translate添加到当前矩阵。您应该考虑使用绝对坐标，例如：

movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.transform("T"+[trans_x,trans_y]);
  this.ox = dx;
  this.oy = dy;
}

也许 this.attr("x") 和 this.attr("cx") 也是矩阵转换点，然后您需要使用以下方式获取绝对值：

x = this.matrix.e;
y = this.matrix.f

请注意上面的代码没有经过测试。

Raphael 2.0 uses SVG matrix and the translate method only adds translate to the current matrix. You should look into using absolute coordinates instead, like:

movePath = function (dx, dy) {
  var trans_x = (dx)-this.ox;
  var trans_y = (dy)-this.oy;

  this.transform("T"+[trans_x,trans_y]);
  this.ox = dx;
  this.oy = dy;
}

Maybe this.attr("x") and this.attr("cx") is also a matrix converted point and then you need to get the absolute value using: