使用 Raphael JS 进行拖放和形状旋转

问题描述

我正在使用 RaphaelJS 2.0 在 div 中创建多个形状.每个形状都需要能够在 div 的范围内独立拖放.双击一个形状后，该形状需要旋转 90 度.然后可以再次拖放和旋转它.

I'm using RaphaelJS 2.0 to create several shapes in a div. Each shape needs to be able to be dragged and dropped within the bounds of the div, independently. Upon double clicking a shape, that shape needs to rotate 90 degrees. It may then be dragged and dropped and rotated again.

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

I've loaded some code onto fiddler: http://jsfiddle.net/QRZMS/. It's basically this:

    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, "<>");
        });


    }

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

The drag and drop is working and also one of the shapes rotates on double click. However, there are two issues/questions:

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

1. How can I attach the rotation onto each shape automatically without having to hard-code each item reference into the rotate method? I.e. I just want to draw the shapes once, then have them all automatically exposed to the same behaviour, so they can each be dragged/dropped/rotated independently without having to explicitly apply that behaviour to each shape.

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

After a shape has been rotated, it no longer drags correctly - as if the drag mouse movement relates to the original orientation of the shape rather than updating when the shape is rotated. How can I get this to work correctly so that shapes can just be dragged and rotated many times, seamlessley?

非常感谢您的任何指点！

Many thanks for any pointers!

推荐答案

我已经尝试了好几次新的转换引擎，但无济于事.所以，我又回到了第一原则.

I've tried several times to wrap my head around the new transform engine, to no avail. So, I've gone back to first principles.

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

I've finally managed to correctly drag and drop an object thats undergone several transformations, after trying to work out the impact of the different transformations - t,T,...t,...T,r,R etc...

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

So, here's the crux of the solution

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
}

就是这样.非常简单，我相信很多人都已经想到了，但也许有人会觉得它很有用.

That's it. Stupidly simple, and I'm sure it's occurred to loads of people already, but maybe someone might find it useful.

这里有一个 fiddle 供您使用.

Here's a fiddle for you to play around with.

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

... and this is a working solution for the initial question.

这篇关于使用 Raphael JS 进行拖放和形状旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！