Kinetic 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()語法以一種方式（例如，不透明度get()轉換某些形狀，並以另一種方式（例如，offset 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中。 我可能會很快提交拉取請求。