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

Question

我需要找到纸上的最后一条路径或圆圈，以便进行进一步计算以绘制更多元素，而调用paper.bottom 只会获取最后一个元素。有没有办法获得特定类型的形状，例如bottom.path、bottom.circle 还是遍历第 n 个 child ？

我想避免使用 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 ，因此我们可以专门为此目的将函数附加到 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');

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

---

Live Demo