drag-and-drop - 使用 Raphael JS 进行拖放和形状旋转

Question

我正在使用 RaphaelJS 2.0 在 div 中创建多个形状。每个形状都需要能够在 div 的边界内独立地拖放。双击形状后，该形状需要旋转 90 度。然后它可以被拖放并再次旋转。

我已经在 fiddler 上加载了一些代码:http://jsfiddle.net/QRZMS/ .基本上是这样的:

    window.onload = function () {

        var angle = 0;

        var R = Raphael("paper", "100%", "100%"),
            shape1 = R.rect(100, 100, 100, 50).attr({ fill: "red", stroke: "none" }),
            shape2 = R.rect(200, 200, 100, 50).attr({ fill: "green", stroke: "none" }),
            shape3 = R.rect(300, 300, 100, 50).attr({ fill: "blue", stroke: "none" }),
            shape4 = R.rect(400, 400, 100, 50).attr({ fill: "black", stroke: "none" });
        var start = function () {
            this.ox = this.attr("x");
            this.oy = this.attr("y");
        },
        move = function (dx, dy) {
            this.attr({ x: this.ox + dx, y: this.oy + dy });
        },
        up = function () {

        };
        R.set(shape1, shape2, shape3, shape4).drag(move, start, up).dblclick(function(){
            angle -= 90;
            shape1.stop().animate({ transform: "r" + angle }, 1000, "<>");
        });


    }

拖放工作正常，其中一种形状在双击时旋转。但是，有两个问题/问题:

如何自动将旋转附加到每个形状上，而不必将每个项目引用硬编码到旋转方法中？ IE。我只想绘制一次形状，然后让它们全部自动暴露于相同的行为，因此可以独立地拖/放/旋转它们，而不必明确地将该行为应用于每个形状。

旋转形状后，它不再正确拖动 - 就好像拖动鼠标的移动与形状的原始方向有关，而不是在形状旋转时更新。我怎样才能让它正常工作，以便可以多次拖动和旋转形状，无缝？

非常感谢您的指点!

Answer 1

我已经多次尝试将我的头环绕在新的变换引擎上，但无济于事。所以，我已经回到了第一原则。

在尝试计算出不同转换的影响 - t,T,...t,...T,r,R 等之后，我终于成功地正确拖放了一个经过多次转换的对象...

所以，这是解决方案的关键

var ox = 0;
var oy = 0;

function drag_start(e) 
{
};


function drag_move(dx, dy, posx, posy) 
{


   r1.attr({fill: "#fa0"});

   //
   // Here's the interesting part, apply an absolute transform 
   // with the dx,dy coordinates minus the previous value for dx and dy
   //
   r1.attr({
    transform: "...T" + (dx - ox) + "," + (dy - oy)
   });

   //
   // store the previous versions of dx,dy for use in the next move call.
   //
   ox = dx;
   oy = dy;
}


function drag_up(e) 
{
   // nothing here
}

就是这样。非常简单，我相信很多人已经想到了它，但也许有人会发现它很有用。

这是一个 fiddle供你玩耍。

... 和 this是初始问题的有效解决方案。