2

我对集合以及如何应用转换有疑问。我来自图形背景，所以我熟悉场景图以及正常的 SVG 组语法，但 Raphael 让我感到困惑。假设我有一个圆圈和一组，我想在其上应用变换。

circle = paper.circle(0,0.5)
set = paper.set()

如果我先添加圆圈，然后进行变换，它就可以了。

set.push circle
set.transform("s100,100")

做一个50半径的圆。但是，如果我颠倒顺序，

set.transform("s100,100")
set.push circle

不应用转换。

这似乎会破坏许多渲染和动画类型算法，您的组/变换保持您的关节状态，并且您向它们添加或删除对象，而不是每次都重新创建整个变换。文档中是否有一个选项我没有看到可以解决这个问题，或者为了简单而放弃了这个功能？缺少它似乎很奇怪，因为它在 SVG 本身的组层次结构中直接且容易地得到支持......我是否需要手动将集合中的转换应用于转换集合后添加的任何子项？

4

2 回答 2

6

Raphael 中的集合只是简单的数组。

当你在片场执行一些动作时，Raphael 通过for(...){}循环遍历所有成员。

Raphael 不支持 SVG 组<g></g>

更新拉斐尔的代码：

// Set
var Set = function (items) {
    this.items = [];
    this.length = 0;
    this.type = "set";
    if (items) {
        for (var i = 0, ii = items.length; i < ii; i++) {
            if (items[i] && (items[i].constructor == elproto.constructor || items[i].constructor == Set)) {
                this[this.items.length] = this.items[this.items.length] = items[i];
                this.length++;
            }
        }
    }
},

如您所见，所有项目都存储在this.items数组中。

于 2012-12-23T12:31:37.483 回答
3

Raphaël 的set目的只是为了提供一种将形状组作为统一的对象集进行管理的便捷方式，方法是聚合element相关动作并将它们（通过代理集合级别中的相应方法）依次委托给每个形状。

鉴于它在 SVG 本身的组层次结构中直接且容易地支持，因此丢失似乎很奇怪......

好吧，Raphaël 并不是试图将 SVG 规范提升为基于 JavaScript 的 API，而是为矢量图形操作提供抽象，而不考虑底层实现（无论是现代浏览器中的 SVG，还是 IE<9 中的 VML）。因此，sets 绝不是 SVG 组的表示。

我是否需要手动将集合中的转换应用于转换集合后添加的任何子项？

绝对不是，您只需要确保在应用转换之前将任何形状添加到集合中。

于 2012-12-22T13:49:14.877 回答