动态JS:我可以为形状添加多个名称吗？

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

这个对象过滤还没有内置，但是一个简单的实现可以是使用getChildren()方法迭代阶段的子级，并在这个循环中测试一个条件，如下所示

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

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

Answer 2

有趣的用例！我会把这个添加到我的待办事项列表中。可能是这样的：

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

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

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中。我可能很快就会提交拉取请求。