1

I have done lots of examples on dragging an object created by Raphael's library. Now I am working with sets and was also able to write a code to drag them.

Now my problem appeared when I rotate an object and then drag it.

Check out this code example: demo

var paper = Raphael('stage', 300, 300);
var r = paper.rect(50,100,30,50).attr({fill:"#FFF"}).rotate(45),
    t = paper.text(30, 140, "Hello");

var p = paper.set(r, t);

r.set = p, t.set = p;


p.newTX=0,p.newTY=0,p.fDx=0,p.fDy=0,p.tAddX,p.tAddY,p.reInitialize=false,

start = function () {

},
move = function (dx, dy) {
    var a = this.set;
    a.tAddX=dx-a.fDx,a.tAddY=dy-a.fDy,a.fDx=dx,a.fDy=dy;
    if(a.reInitialize)
    {
        a.tAddX=0,a.fDx=0,a.tAddY=0;a.fDy=0,a.reInitialize=false;
    }
    else
    {
        a.newTX+=a.tAddX,a.newTY+=a.tAddY;
        a.attr({transform: "t"+a.newTX+","+a.newTY});
    }

},
up = function () {
    this.set.reInitialize=true;
};
p.drag(move, start, up);

By examining the DEMO you can see that the set is created with rotated rectangle, but as soon you drag it, it goes back to the 0 degree state. Why? Any solutions?

Turnip
  • 35,836
  • 15
  • 89
  • 111
Gago
  • 35
  • 2
  • 12

2 Answers2

5

The problem is that whenever an element is transformed by applying a string containing instructions to move, rotate, scale etc, it resets the transformation object, and hence previous transformations get lost. To avoid this, add "..." at the beginning of the transformation string. Like,

var el = paper.rect(10, 20, 300, 200);
// translate 100, 100, rotate 45°, translate -100, 0
el.transform("t100,100r45t-100,0");
// NOW, to move the element further by 50 px in both directions
el.transform("...t50,50");

If "t50,50" is used instead of "...t50,50", then transformation effect for "t100,100r45t-100,0" is lost and transformation effect for "t50,50" rules.

Raphael reference for further study: http://raphaeljs.com/reference.html#Element.transform

Hope this helps.

enarcee
  • 607
  • 4
  • 5
1

I found an easy solution to this problem. Since I need to have a diamond instead of rectangle, I have created a path that represents that diamond. Then this path becomes just like a square 45 degree rotated. This turned out to be easy because dragging functionality I had for my program works perfectly with paths.

armanxxx
  • 45
  • 1
  • 10