CODEWITHSUNDEEP
javascripthtmldom-eventsraphael
Nag Arjun
Nag Arjun

Reputation: 125

How to move a Raphael canvas wholly (which contains some objects) from one coordinate to another coordinate to some other coordinate continuously

I have created Raphael content here .. http://jsfiddle.net/ryWH3/76/

Now I need to move the whole content of Raphael Canvas from one co-ordinate to another co-ordinate.

For Example:

My Raphael Canvas is at -- x_coordinate:100,y_coordinate:100

Now I want to move it to -- x: 200, y :200

From the old co-ordinates I want to move that whole content to -- x:150, y:150

again to some other co-ordinates from the last co-ordinates

Please suggest me in moving this content

Upvotes: 3

Views: 1423

Answers (2)

King Friday
King Friday

Reputation: 26086

using jquery for example...

$(paper.canvas).css({top:topPosition, left: leftPosition});

The paper.canvas is how you get a hold of the dom element its within.

Upvotes: 0

Neil
Neil

Reputation: 8111

Ok I don't think you can actually more the paper itself, which is what is returned by Raphael to your r variable. You can iterate over the elements and do whatever you like to them:

r.forEach(function (el) {
   el.translate(200,200);
});

I updated your fiddle to demonstrate it moving:

updated fiddle

EDIT

I have also added the following to demonstrate animating your various sets:

Text.animate({transform: "t100,100"}, 1000);
smallCircles.animate({transform: "t100,100"}, 1000);
bigCircles.animate({transform: "t100,100"}, 1000);

updated fiddle with above animation

Upvotes: 1

Related Questions