Question

我遇到了套装问题以及如何应用转换。我来自图形背景，所以我熟悉场景图以及普通的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本身的组层次结构中直接且容易地支持它似乎很奇怪...我是否需要手动将集合中的变换应用于之后添加的任何子节点集转化了？

Answer 1

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数组中。

Answer 2

Raphaël的set仅仅是为了提供一种方便的方式来管理形状组作为统一的对象集合，通过聚合element相关的动作并委派它们（通过代理集合中的相应方法）等级）每个形状顺序。

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

嗯，Raphaël不是试图将SVG规范提升为基于JavaScript的API，而是提供矢量图形操作的抽象，无论底层实现如何（无论是现代浏览器中的SVG，还是IE中的VML＆lt; 9））。因此，set s绝不代表SVG组。

我是否需要手动将变换应用于任何设置在改变集合后添加的孩子？

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

在raphaeljs中设置不是真正的组？转换订单

2 个答案: