Question

我有以下例子来创建一个多边形：

            var poly = new Kinetic.Polygon({
                x: coorx,
                y: coory,
                points: coords,
                alpha: 0,
                fill: colors[Math.floor(Math.random() * colors.length)],
                name: myname
            });

我想要做的是有两个类名，例如“rect-1”和“rect-2”。我希望其中一些形状具有其中一个类，有些会同时具有这两个类。

这一点的关键是能够使用get()语法以一种方式转换某些形状，例如以不透明度转换，以其他方式转换其他形状，例如偏移：

是否有可能为高级选择赋予形状多个“类”名称，如我在此描述的那样？

谢谢！

    var shapes = stage.get(".rect-1");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            alpha: (opacities[Math.floor(Math.random() * opacities.length)] * 1.5) + .7,
            duration: 2
        });                 
    }

    var shapes = stage.get(".rect-2");

    for(var n = 0; n < shapes.length; n++) {
        var shape = shapes[n];

        shape.transitionTo({
            offset: {
                x: 10,
                y: 10
            },
            duration: 2
        });                 
    }

Answer 1

有趣的用例！我将这个添加到我的待办事项列表中。也许是这样的：

var rect = new Kinetic.Rect({
   name: 'foo bar test'
});

将分配三个不同的名称（类似于DOM类名称字符串）

Answer 2

此对象过滤尚未内置，但一个简单的实现可能是使用getChildren()方法迭代阶段子项并在此循环中测试条件，如

if shape.get('classList') && shape.get('classList').indexOf('rect1') !== -1

另一种单声道继承解决方案可能是使用extend()方法对Kinetic.Rect类进行子类化，并重载shapeType属性，这将成为过滤的关键。

Answer 3

Kinetic功能可公开访问，因此您可以使用自己的版本轻松覆盖它。这就是我修复它的方法。

Kinetic._addName = function(node, name) {
    if(name !== undefined) {
        var names = name.split(/\W+/g);
        for(var n = 0; n < names.length; n++) {
            if (names[n]) {
                if(this.names[names[n]] === undefined) {
                    this.names[names[n]] = [];
                }
                this.names[names[n]].push(node);
            }
        }
    }
};

Eric，如果你喜欢它，可以随意添加到Kinetic。我很快就会提交拉动请求。

Kinetic JS：我可以为形状添加多个名称吗？

3 个答案: