Raphael.js 中带有 transform() 方法的可拖动路径答案

【问题标题】：Draggable paths with transform() method in Raphael.jsRaphael.js 中带有 transform() 方法的可拖动路径
【发布时间】：2012-11-26 00:39:58
【问题描述】：

我正在尝试使用非弃用方法Element.transform() 使路径可拖动。这是使用已弃用的方法Element.translate() 的答案：

Making paths and images draggable in Raphael js

当我简单地将translate() 替换为transform() 时，我的路径很快就会回到初始位置：

drag(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;
     }, 
     function () {
       this.ox = 0;
       this.oy = 0;
     },
     function() {
     }
);

有什么想法吗？

【问题讨论】：

标签： javascript path drag-and-drop raphael

【解决方案1】：

我找到了解决办法！

只需使用 transform() 的附加语法，即 .transform("...t" + .. + ...)

所以这是我的最终结果：

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

       this.transform("...t" + trans_x + "," + trans_y); //Just change this line
       this.ox = dx;
       this.oy = dy;
     }, 
     function () {
       this.ox = 0;
       this.oy = 0;
     },
     function() {
     }
);

而且效果很好。

【讨论】：