Raphael.js新手问题：如何创建矩形和线条作为ONE对象？

Question

在 raphael 中，如果我想渲染以下形状：

我必须做类似的事情：

var paper = Raphael("notepad", 320, 200);

var rect = paper.rect(...);
var line1 = paper.path(...);
var line2 = paper.path(...);

创建三个元素：rect，line1，line2。

但是，我想将渲染的形状视为其他js代码中的一个对象。在拉斐尔，我怎样才能创建这种形状，只返回一个对象而不是三个？

Answer 1

您想要创建set。

  

创建类似于数组的对象，以便一次保留和操作几个元素。警告：它不会在页面中为自己创建任何元素。

var st = paper.set();
st.push(
    paper.circle(10, 10, 5),
    paper.circle(30, 10, 5)
);
st.attr({fill: "red"});

您的代码看起来像这样：

var paper = Raphael("notepad", 320, 200),
    st = paper.set();

st.push(
    paper.rect(...),
    paper.path(...),
    paper.path(...)
);

// use st elsewhere

---

修改 的

  

如何访问集合中的单个元素呢？

在将对象添加到集合之前，您可以抓取对象的引用：

var paper = Raphael("notepad", 320, 200),
    st = paper.set(),
    rect1 = paper.rect(...),
    path1 = paper.path(...),
    path2 = paper.path(...);

st.push(rect1, path1, path2);

我不是百分百肯定，但由于文档说集合是“类似数组”，那么你也应该能够使用数组索引表示法访问集合中的元素：

var i, elt;
for (i=0; i<st.length; i++)
{
    elt = st[i];
    // do stuff with elt
}