Question

我需要找到论文中的最后一个路径或圆圈，以便执行进一步的计算以绘制更多元素，并且调用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)

Answer 1

检查底部元素是否会使您获得底部元素（沿Z轴） - 这是不希望的。考虑一种情况，即元素的Z排序被改变 - 可能通过调用Element.toBack() - 这将完全使检查失效。

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

Raphaël也允许使用extending the built-in set of functions，因此我们可以仅为此目的将一个函数附加到纸张元素。以下代码段显示了这样一个函数的示例，该函数从纸上返回传递类型的最后一个元素，如果没有找到这样的元素，则返回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');

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

Live Demo

Answer 2

关于如何遍历第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"});

http://jsfiddle.net/eE7xS/

如何获得特定类型的最后一个形状？

2 个答案:

Live Demo