3

私は初心者なので、これは非常に基本的な質問になるかもしれません。コンストラクターからオブジェクトを作成しています。オブジェクトのプロパティの 1 つを変数にリンクする必要があります。したがって、変数の値が変化すると、プロパティの値も変化するはずです。

例: 私は kineticjs に取り組んでおり、コンストラクターからオブジェクトを作成していますRect。プロパティの値が、変更されるたびdraggableに の値に動的に変更されるようにします。optvaroptvar

Var optvar="true";

rect = new Kinetic.Rect({ 
    x: 22, 
    y: 7, 
    width: 0, 
    height: 0,
     fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4, 
    draggable: optvar    
});

optvar="false"; // I want value if rect.draggable to be equal to false
4

1 に答える 1

5

これは基本的な質問ではありません。:-)

ES5の時点で、 (および)を介してセッターゲッターでプロパティを定義することが可能です。ES5 のこの機能は、最新のブラウザーで非常に広くサポートされていますが、古いブラウザー (IE8 以前など) にはありません。Object.definePropertyObject.defineProperties

ゲッターを使用すると、これを行うことができます。

var optvar=true;

rect = new Kinetic.Rect({ 
    x: 22, 
    y: 7, 
    width: 0, 
    height: 0,
     fill: 'red', 
    stroke: 'black', 
    strokeWidth: 4
});
Object.defineProperty(rect, "draggable", {
    enumerable: true,
    get:        function() {
        return optvar;
    }
});

これによりプロパティが作成さrectれ、取得すると の現在の値が返されますoptvar。ゲッター関数はoptvar変数に対するクロージャであるため、これが機能します (クロージャについては、私のブログで詳しく説明しています:クロージャは複雑ではありません)。

もちろん、これが正しく機能するかどうかは、実装Kinetic.Rect方法によって異なります。Kinetic.Rect

上記で作成されたプロパティは列挙可能ですfor..inが (他のプロパティと同様にループで表示されます)、書き込み可能ではありません。書き込み可能にしたい場合:

Object.defineProperty(rect, "draggable", {
    enumerable: true,
    get:        function() {
        return optvar;
    },
    writable:   true,
    set:        function(value) {
        optvar = value;
    }
});

質問に対するあなたのコメントから:

複数のオブジェクトがありますrect(すべて動的に作成されます)。すべてのオブジェクトのプロパティを 1 つの変数にリンクしたい。

もちろん、すべての四角形に対してゲッターを使用できるため、上記のメカニズムを使用してそれを行うことができます。

var optvar = true;
var rect;
var rects = [];

while (rects.length < 10) {    
    rect = new Kinetic.Rect({ 
        x: 22, 
        y: 7, 
        width: 0, 
        height: 0,
        fill: 'red', 
        stroke: 'black', 
        strokeWidth: 4
    });
    Object.defineProperty(rect, "draggable", {
        enumerable: true,
        get:        getDraggable
    });

    rects.push(rect);
}
function getDraggable() {
    return optvar;
}

これで、これらの 10 個の四角形すべてが に基づいてドラッグ可能になるかどうかが決まりますoptvar

(注: このコードはすべて関数のどこかにあると想定しているため、グローバル変数は作成していません。)

于 2012-12-08T16:07:01.013 に答える