0

我遇到了一个简单的问题（我刚开始使用 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');​​​​​

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

这是我的幼稚代码，认为一组克隆集（克隆分支的冠部）确实会移动到第一个冠部旁边的位置 (200, 0)。

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

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

执行此行时不会发生太多事情。

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

基本问题是：

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

谢谢。

4

1 回答 1

3

您正在克隆该集合，但由于您的画布只有 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);

更新了小提琴。

于 2012-12-04T14:07:42.430 回答