Question

我遇到了一个简单的问题（我刚开始使用lib）：

创建对象集，复制它们并对其进行转换的最有效方法是什么？

围绕中心点创建一堆圆圈：

var height = 150,
    width = 150,
    branchRadius = 20,
    centerX = width / 2,
    centerY = height / 2,
    treeCrownCenterOffset = 10,
    treeCrownRotationCenterX = centerX,
    treeCrownRotationCenterY = centerY - treeCrownCenterOffset,
    rotationCenter = [treeCrownRotationCenterX , treeCrownRotationCenterY],
    paper = Raphael('logo', height , width ),
    outerCircle = paper.circle(treeCrownRotationCenterX, treeCrownRotationCenterY, branchRadius).attr({fill:'#F00'}),
    innerCircle = paper.circle(treeCrownRotationCenterX, treeCrownRotationCenterY, branchRadius - 4).attr({fill:'#000'}),
    branch = paper.set([outerCircle, innerCircle]),
    crown = paper.set(),
    numCircles = 8, rotationStep = 360 / numCircles, i = 0;

for(; i < numCircles - 1 ; i++) {
    //Cloning a branch and pushing it to the crown after transforming it
    crown.push(branch.clone().transform('r' + ((i + 1) * rotationStep) + ',' + rotationCenter));

}

//Putting a second crown 200px right of the first crown
//Yes, I'm building a tree :-) No trunk at this point

crown.clone().transform('t200,0');

如果你喜欢小提琴，这里是the fiddle。

这是我天真的代码，认为一组克隆的集合（克隆分支的冠）确实将被移动到第一个皇冠旁边的位置（200,0）。

它不起作用：看起来像克隆的一组克隆元素无法移动：

crown.clone().transform('t200,0');

执行此行时没有太多事情发生。

似乎“克隆”没有按照我的预期进行，并且转换不会传递给第二个（克隆的）对象集合。

基本问题是：

如何使用Raphael创建可重用对象？

感谢。

Answer 1

您正在克隆该集，但由于您的画布宽度只有150像素，因此将其翻译为200像素会将其从预订中发送出去：）

但是，当您扩展画布的大小时，您将看到只有一个圆圈似乎已被克隆。不是这种情况。问题不在于克隆，而在于转型。

我发现转变是一个巨大的麻烦。行“crown .clone（）。transform（'t200,0'）;”将该转换应用于集合中的每个对象，但我相信它会覆盖旋转。即使不是这样，它也会在旋转后应用平移，使圆圈像离心力一样散射。

我知道你想避免在克隆集中循环，但这样做有效：

var crown2 = crown.clone();
for (i = 0; i < crown2.length; i ++) {
    crown2[i].transform('t200,0r' + (i * rotationStep) + ',' + rotationCenter);
}

另请注意，您没有将原始分支添加到集合中。你需要这个：

branch = paper.set([outerCircle, innerCircle]),
crown = paper.set(),
numCircles = 8, rotationStep = 360 / numCircles, i = 0;

//ADD ORIGINAL BRANCH TO SET
crown.push(branch);

Updated fiddle

使用Raphael创建可重用对象

1 个答案: