Reputation: 5598
I've been toying around with Raphael JS, but failed to find any solution to rotate a group/set of paths as group, and not individually.
A group/set of path:
Each element is rotated. Not the entire group/set:
How I do:
var bobble = map.paper.set();
bobble.push(map.paper.add([{
"fill":fill,
"stroke":"none",
x: 50,
y: 50,
width: 100,
height: 100,
"type":"rect",
"r": 4
},{
"fill":fill,
"stroke":"none",
x: 100,
y: 25,
width: 200,
height: 50,
"type":"rect",
"r": 4
}]));
bobble.rotate(45);
What am I doing wrong?
Upvotes: 2
Views: 3907
Reputation: 187
I think it's a little easier.
myset.transform("R45,20,20")
does exactly the same as
myset.rotate(45,20,20) // deprecated
the whole myset will rotate around the center at 20,20 (maybe the center of the set) otherwise
myset.transform("R45")
will rotate each element of the set around it's own center
Upvotes: 1
Reputation: 5028
Here you go DEMO
var paper = Raphael('arrows');
var r1 = paper.rect(100,100,200,10,5).attr({fill:'white'});
var r2 = paper.rect(50,200,100,15,5).attr({fill:'white'});
var st = paper.set(r1,r2);
var l_coord = st.getBBox().x,
r_coord = st.getBBox().x2,
t_coord = st.getBBox().y,
b_coord = st.getBBox().y2;
var cx = (l_coord + r_coord)/2,
cy = (t_coord + b_coord)/2;
st.rotate(54,cx,cy);
Since you need to get your Raphael set's
center coordinates, you can use getBBox()
function which returns you:
Upvotes: 7
Reputation: 1333
The set of raphaeljs is a list of element. So, when you use tranform method, it is just a transform of unique element of list in the set.
I had created an plugin which supports g tag for my project. But I haven't yet implement the transform method.
const SVG = 'http://www.w3.org/2000/svg';
function TCRaphael(container, width, height) {
var paper = new Raphael(container, width, height);
paper.node = document.getElementById(container).getElementsByTagName("svg")[0];
console.log(paper.node)
paper.group = function (parent) {
return new Group(parent);
};
function Group(parent) {
var me = this;
this.node = document.createElementNS(SVG, "g");
if (typeof parent !== 'undefined') {
if (typeof parent.node != 'undefined')
parent.node.appendChild(me.node);
else{
parent.appendChild(me.node);
}
}
this.append = function (child) {
me.node.appendChild(child.node);
return child;
};
this.appendNode = function (childNode) {
me.node.appendChild(childNode);
};
this.appendTo = function (parent) {
if (typeof parent !== 'undefined') {
if (typeof parent.node != 'undefined')
parent.node.appendChild(me.node);
else{
parent.appendChild(me.node);
}
}
};
this.remove = function(){
me.node.parentNode.remove();
};
this.circle = function(x, y, r){
return me.append(paper.circle(x, y, r));
};
this.ellipse =function(x, y, rx, ry){
return me.append(paper.ellipse(x, y, rx, ry));
};
this.image = function(src, x, y, width, height){
return me.append(paper.image(src, x, y, width, height));
};
this.path = function(pathString){
return me.append(paper.path(pathString));
};
this.rect = function(x, y, width, height, r){
return me.append(paper.rect(x, y, width, height, r));
};
this.text = function(x, y, text){
return me.append(paper.text(x, y, text));
}
}
return paper;
}
You can add more function which you want to TCRaphael.
Upvotes: 1