CODEWITHSUNDEEP
svgraphael
curly_brackets
curly_brackets

Reputation: 5598

Raphael JS rotate group/set not individually

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:

A group/set of path

Each element is rotated. Not the entire group/set:

When group/set is rotated

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

Answers (3)

Lorenzo
Lorenzo

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

Brian
Brian

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);

enter image description here enter image description here

Since you need to get your Raphael set's center coordinates, you can use getBBox() function which returns you:

enter image description here

Upvotes: 7

Tuan Chau
Tuan Chau

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

Related Questions