CODEWITHSUNDEEP
javascriptraphael
Behseini
Behseini

Reputation: 6330

Positioning A Set in Raphael Paper

Is there any way to group bunch of elements of paper in one set and only position that set in the paper?

For example At This Example I was trying to put some circles in side a rectangle and just position the rectangle in each part of the paper. Can you please let me know how to do it? 

  var paper = Raphael('my-canvas', 500, 300);
  paper.canvas.style.backgroundColor = '#F00';
  var rect = paper.rect(5, 5, 100, 100);

  var st = paper.set();
  st.push(
  rect.circle(10, 10, 5),
  rect.circle(30, 10, 5));

Upvotes: 0

Views: 90

Answers (2)

gatotkaca
gatotkaca

Reputation: 52

Instead of using a set, you can create a new div, add a new paper element to this div and then change the position of the div.

If you are using jquery, it could look something like this:

$(".body").append('<div id="setContainer"></div>');
paper = new Raphael(document.getElementById("setContainer"), 500, 300);
paper.canvas.style.backgroundColor = '#F00';
var rect = paper.rect(5, 5, 100, 100);
var circle = paper.circle(10, 10, 5);
var circle2 = paper.circle(30, 10, 5);

// then you can adjust the position of the div, for example to 100,100
$("#setContainer").css("top", 100);
$("#setContainer").css("left", 100);

The advantage of using this approach rather than a set is that it gives you more flexibility for the way you want to manipulate the elements you are grouping together.

You can even wrap a function around this code in order to define the id of the container programatically if you wanted to create several instances of the same group of elements.

Upvotes: 0

Ian
Ian

Reputation: 13842

You can do this via a transform on the set (you could also do it with another attribute like x,y but only if the elements use that specific attribute).

Its worth noting, that although you can apply a transform to the set, it is in effect applying the transform to each element in the set. Ie there is no specific 'set' or 'group' element in Raphael (there is in Snap.svg which is its updated brother, but doesn't quite have the same backwards compatibility). So there is no true hierarchy of groups, where they could have separate transforms which cascade down.

var paper = Raphael('my-canvas', 500, 300);
paper.canvas.style.backgroundColor = '#F00';
var rect = paper.rect(5, 5, 100, 100);



var st = paper.set();
st.push(
    paper.rect(5, 5, 100, 100),
    paper.circle(10, 10, 5).attr({ fill: 'blue' }),
    paper.circle(30, 10, 5).attr({ fill: 'green' })
);

st.transform('t20,20');
st.animate({ transform: 't100,100' }, 2000);

Its worth looking at the Raphael docs for transforms if not sure here

jsfiddle

Upvotes: 1

Related Questions