3

があり、Kinetic.Groupそのプロパティに variable を追加しましたactualstatus。actualstatusは、他の JavaScript によって「1」または「0」に動的に変更されます ( 1 = ON 0 = OFF)。今、私がやろうとしているのは、KineticJS で実際のステータス (オンまたはオフ) を表示することです。カスタムを使用すると、次のKinetic.Shapeように簡単に実行できます。

var shape = new Kinetic.Shape({
    actualstatus: "",
    drawFunc: function(canvas){
        var ctx = canvas.getContext();
        ctx.beginPath();
        if(this.actualstatus == "1") ctx.fillStyle = "yellow";
        else if(this.actualstatus == "0") ctx.fillStyle = "lightgrey";
        ctx.fillRect(0,0,50,50);
        ctx.closePath();
    }
});

問題なく動作しましたが、イベントをリッスンしたり、複数を使用してctx.beginPath() ctx.closePath()複雑なウィジェットを描画したりすることはできませんでした。

そのため、イベントと複雑な描画の問題を解決する非カスタム キネティック シェイプのみを使用して再構築していますactualstatusが、グループの - プロパティに従って、色やテキストが変更されなくなりました。すべての形状。

だから私の質問に:プロパティが変更されるたびに、新しい色などで形状を再描画する方法はありactualstatusますか? または、変更をリッスンする方法はありactualstatusますか?

上記で少し複雑に言ったことのイメージをどうにか理解していただければ幸いです:)もちろん、どんな助けも大歓迎です;）

4

2 に答える 2

1

@markE ご協力とすばらしいコード スニペットをありがとうございます。KineticJS 関数を使用したかったのですactivestateが、.setAttrs()メソッド で設定することで機能するようになりました。

rect.setAttrs({
     activestate: "0" //or "1"
});

属性を変更する場合.setAttrs()は、KineticJS が提供する attrs-listener を使用できます。

rect.on('activestateChange', function(){
    if(activestate == "1")
         rect.setFill('yellow');
    else if(activestate == "0")
         rect.setFill('grey');
});
于 2013-06-26T08:30:56.477 に答える