svg - Raphael JS 不单独旋转组/集

Question

我一直在玩弄 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);

我做错了什么？

Answer 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 集合的 中心坐标，您可以使用返回您的getBBox() 函数: