0

イベント ハンドラーを変数に適用する方法はありますか、それとも非表示の入力などで行う必要がありますか? 変数が設定されています：

var c = document.getElementById('myCanvas');
c.myVar = 17;

そして、それが変更された場合に備えてイベントハンドラーを設定し、作成および変更される余分な非表示の入力を保存し、一般的にコードを合理化したいと思います。

ありがとう！

4

2 に答える 2

1

DOM 要素の属性の変更をフックしたい場合は、おそらくDOM Mutation eventsを調べる必要があります。ただし、やり過ぎのように感じます。その属性へのすべてのアクセスを関数でラップし、その関数内から好きなものを呼び出すだけです。常にその関数を使用して属性にアクセスしていることを確認してください。

于 2013-10-19T20:53:06.167 に答える
0

必要なものを説明するために、目的の関数を呼び出して、オブジェクトのプロパティにゲッターとセッターを定義できます。

HTML:

<canvas id="myCanvas" class="border"></canvas>

JavaScript:

var x = 0,
    y = 0,
    c = document.getElementById('myCanvas'),
    ctx = c.getContext('2d'),
    WIDTH = c.width,
    HEIGHT = c.height,
    paint = function () {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        ctx.beginPath();
        ctx.rect(x, y, 6, 6);
        ctx.closePath();
        ctx.fill();
    };

Object.defineProperty(c, 'x', {
    get: function () {
        return x;
    },
    set: function (value) {
        x = value;
        paint();
    }
});

Object.defineProperty(c, 'y', {
    get: function () {
        return y;
    },
    set: function (value) {
        y = value;
        paint();
    }
});

window.setInterval(function () {
    var dx = Math.round(Math.random() * 6) - 3,
        dy = Math.round(Math.random() * 6) - 3;

    if (c.x + dx > 0 && c.x + dx < c.width) {
        c.x += dx;
    }

    if (c.y + dy > 0 && c.y + dy < c.height) {
        c.y += dy;
    }
}, 20);

CSS:

canvas.border {
    border-style: solid;
    border-color: 0;
}

フィドル

注: 上記の解決策は、特定の質問に答えるポイントを示すために使用されます。自己描画オブジェクトに対する欲求をうまく解決することはできません。これは、(x または y が変わるたびに) 2 つの場所からペイントを呼び出すためです。x と y を常に変更している場合は、2 倍の描画を行います。より良い方法は、x を変更し、y を変更し、必要なその他の状態の変更を行ってから、オブジェクトのペイント メソッドを呼び出してオブジェクト自体をペイントさせることです。

これは、このタイプのモデルの問題をうまく説明しているので、この方法で物事を行うときに陥りやすい落とし穴を示す価値があります。したがって、このメモではコードをそのままにしておきます。

次のコードでこれを行うためのより良い方法であると私が信じていることを示す、これの新しいバージョンを作成しました。JavaScript のみが変更されました。

JavaScript:

function DrunkBox(x, y) {
    'use strict';

    var c = document.getElementById('myCanvas'),
        ctx = c.getContext('2d');

    this.width = c.width;
    this.height = c.height;

    this.x = x,
    this.y = y;

    this.paint = function () {
        ctx.clearRect(0, 0, this.width, this.height);
        ctx.beginPath();
        ctx.rect(this.x, this.y, 6, 6);
        ctx.closePath();
        ctx.fill();
    };
}

var db = new DrunkBox(50, 30);

window.setInterval(function () {
    var dx = Math.round(Math.random() * 6) - 3,
        dy = Math.round(Math.random() * 6) - 3;

    if (db.x + dx > 0 && db.x + dx < db.width) {
        db.x += dx;
    }

    if (db.y + dy > 0 && db.y + dy < db.height) {
        db.y += dy;
    }
    db.paint();
}, 20);

フィドル

于 2013-10-19T22:24:44.853 に答える