9

I have a set of objects grouped with Raphael.set(). What I want to do is to move the whole set (change x and y coordinates) from one place to another. How I can move the whole set as a single object? What I found already is that when an .attr({X: newX, Y: newY}) is called every element from the set will be positioned on this coordinated which will result in piling all the elements in one place.

3 Answers 3

15

Edit: Refer to Rick Westera's answer as translate is now deprecated.

Use .translate(x, y), example:

var paper = Raphael('stage', 300, 300);
var set = paper.set();
set.push(paper.rect(0,0,30,50));
set.push(paper.circle(40,50,10));
set.push(paper.path("M 0 70 L 100 70"));
set.translate(100, 100);

http://jsfiddle.net/q4vUx/

2
  • 4
    if you want it to be a bit more graphic, this may help jsfiddle.net/q4vUx/1
    – limoragni
    Jan 25, 2012 at 4:42
  • 2
    translate is being deprecated, use transform (see my answer below) Mar 21, 2013 at 4:52
9

Use transform('Tx,y') as translate is deprecated. For example:

var paper = Raphael('stage', 300, 300);
var set = paper.set();
set.push(paper.rect(0, 0, 100, 100));
set.push(paper.text(50, 50, "Foo"));
set.transform("T100,50");

Note that there are two types of translation:

  • 'T100,50' will move the set 100px to the right and 50 down using the global axis.
  • 't100,50' will do the same but using the set's local axis (ie. it depends on which way the set has been rotated).
2

This is what i'm using to reposition a set, in my case is a set of fonts returned by Paper.print() but i think it should work with any kind of set.

var glyphs = paper.print(0, 0, text, paper.getFont(font, 800), fontSize).hide();
glyphs.transform('...T' + [posx, posy] + 'R' + [angle, posx, posy]).show();

hope it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.