Raphael JS 不单独旋转组/设置答案

【问题标题】：Raphael JS rotate group/set not individuallyRaphael JS 不单独旋转组/设置
【发布时间】：2014-06-12 21:42:21
【问题描述】：

我一直在玩 Raphael JS，但未能找到任何解决方案将一组/一组路径作为组而不是单独旋转。

一组/一组路径：

每个元素都被旋转。不是整个组/组：

我该怎么做：

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

我做错了什么？

【问题讨论】：

根据this question，您已经获得了两个看似不错的答案，但都没有回复。请养成回复的习惯，如果只是为了感谢帮助你的人。

标签： svg raphael

【解决方案1】：

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

由于您需要获取您的Raphael set's 中心坐标，您可以使用返回您的getBBox() 函数：

【讨论】：

【解决方案2】：

raphaeljs 的集合是一个元素列表。所以，当你使用 transform 方法时，它只是对集合中列表唯一元素的变换。

我为我的项目创建了一个支持 g 标签的插件。但是我还没有实现transform方法。

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

您可以向 TCRaphael 添加更多您想要的功能。

【讨论】：

【解决方案3】：

我认为这更容易一些。

myset.transform("R45,20,20")

完全一样

myset.rotate(45,20,20)  // deprecated

整个 myset 将在 20,20 处围绕中心旋转（可能是集合的中心）否则

myset.transform("R45")

将围绕它自己的中心旋转集合中的每个元素

【讨论】：