0

たとえば、ポリゴンを作成するために次のものがあります。

            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」の2つのクラス名を付けることです。いくつかの形状にそれらのクラスの1つを持たせたいのですが、いくつかは両方を持っています。

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
        });                 
    }
4

3 に答える 3

8

興味深いユースケース！これをToDoリストに追加します。おそらくこのようなもの：

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

3つの異なる名前を割り当てます（DOMクラス名文字列と同様）

于 2012-08-11T03:34:26.370 に答える
3

このオブジェクトフィルタリングはまだ組み込まれていませんが、簡単な実装の1つは、getChildren()メソッドを使用してステージの子を反復処理し、次のようなこのループで条件をテストすることです。

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

単一継承の別の解決策は、メソッドを使用してKinetic.Rectクラスをサブクラス化しextend()、属性をオーバーロードすることshapeTypeです。これがフィルタリングのキーになります。

于 2012-08-07T00:47:07.563 に答える
0

キネティック関数は一般公開されているため、独自のバージョンで簡単に上書きできます。これが私がそれを修正した方法です。

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);
            }
        }
    }
};

エリック、気に入ったら、キネティックに自由に追加してください。すぐにプルリクエストを送信する可能性があります。

于 2014-04-09T03:53:53.613 に答える