使用Raphael JS拖动，放下和旋转轮廓 [英] Drag, drop and shape rotation with Raphael JS

问题描述

我正在使用RaphaelJS 2.0在div中创建几个形状。每个形状需要能够在div的范围内被单独拖放。双击一个形状时，该形状需要旋转90度。然后可以将其拖放并再次旋转。

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

  window.onload = function（）{
 
 var angle = 
 
 var R = Raphael（paper，100％，100％），
 shape1 = R.rect（100，100，100，50）填充：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 = 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，）; 
}）; 
 
 
} 
  

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

1. 如何自动将旋转附加到每个形状上，而无需硬编码每个项目引用到rotate方法？即我只想绘制一次形状，然后让它们全部自动暴露在同一个行为上，因此它们可以分别拖动/放置/旋转，而不必将这种行为明确地应用于每个形状。




2. 旋转形状后，不再拖动正确 - 就像拖动鼠标移动与形状的原始方向相关，而不是在旋转形状时进行更新。如何才能使这个工作正常，以便形状可以拖动和旋转多次，无缝？

许多感谢任何指针！

解决方案

我已经尝试过几次，围绕着新的变换引擎封闭我的头，无济于事。所以，我回到了第一个原则。

在尝试解决不同转换的影响之后，我终于设法正确地拖放了经过多次转换的对象，t，T，.. .t，... T，r，R等...

所以，这里是解决方案的症结所在

  var ox = 0; 
 var oy = 0; 
 
函数drag_start（e）
 {
}; 
 
 
函数drag_move（dx，dy，posx，posy）
 {
 
 
 r1.attr（{fill：＃fa0 }）; 
 
 // 
 //这是有趣的部分，应用一个绝对变换
 //与dx，dy坐标减去dx和dy 
 / / 
 r1.attr（{
 transform：... T+（dx  -  ox）+，+（dy  -  oy）
}）; 
 
 // 
 //存储以前版本的dx，dy，用于下一个移动调用。 
 // 
 ox = dx; 
 oy = dy; 
} 
 
 
函数drag_up（e）
 {
 //这里没有
} 
  

就是这样。愚蠢的简单，我确定已经发生了大量的人，但也许有人会觉得有用。

这是一个小提琴，让您玩耍。

...和这是最初的问题的工作解决方案。

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.

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. 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.

2. 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.

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.

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

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

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