1

我需要在论文中找到最后一个路径或圆圈，以便执行进一步计算以绘制更多元素，并且调用paper.bottom仅获取最后一个元素。有没有办法获得特定类型的形状，例如bottom.path，bottom.circle或遍历第 n 个孩子？

我想避免使用 jQuery 选择器，因为我无法从中检索任何属性。

填充有形状的纸张示例：

var paper = Raphael('paper',500,500);
var c1 = paper.circle(100,100,50)
var p1 = paper.path("M10 20l70 0")
var c2 = paper.circle(200,100,50)
4

2 回答 2

1

检查底部元素将为您提供底部元素（沿 Z 轴） - 这是不希望的。考虑一种情况，其中元素的 Z 顺序被改变 - 可能是通过调用Element.toBack()- 这将使检查完全无效。

相反，您可能希望通过迭代元素数组并检索特定类型的最后一个元素（例如circle）来寻求更语义化的方法。

Raphaël 还允许扩展内置函数集，因此我们可以将一个函数附加到 paper 元素上，仅用于此目的。下面的代码片段显示了一个这样的函数的例子，它从论文中返回传递类型的最后一个元素，或者false如果没有找到这样的元素：

Raphael.fn.last = function(type) {
    var element;
    this.forEach(function(el) {
        if (el.type == type) {
            element = el;
        }
    });
    return element || !!element;
};

请务必在纸质元素的任何实例化之前附加此功能。不仅仅是调用它，传递所需的元素类型：

var r = Raphael(paper, '100%', '100%');
// ...
// add elements etcetera
// ...
var lastCircle = r.last('circle');

请注意，对于建议的实现，这可能会导致繁重的操作 - 如果论文包含许多元素，但这里的目的是授予您功能扩展的概念，并启动思考过程。随意改进功能以提高其效率。

现场演示

于 2012-11-22T22:16:19.047 回答
1

关于如何遍历第 n 个孩子：只需将您的路径放在一个集合中，它们就会像任何普通数组一样被索引。您可以轻松地调用该集合中的任何数字，并获得对其属性的完全访问权限：

var myPaper = Raphael('container', '800', '600');

myPaper.setStart();
var circ1 = myPaper.circle(50, 50, 40);
var circ2 = myPaper.circle(150, 50, 40);
var circ3 = myPaper.circle(250, 50, 40);
var circ4 = myPaper.circle(350, 50, 40);
var allCircles = myPaper.setFinish();

allCircles[2].attr({fill: "blue"});

​</p>

http://jsfiddle.net/eE7xS/

于 2012-11-22T22:57:44.370 回答