0

次のようなタグを持つ HTML ドキュメントがあります。

<div class="sign"></div>

これらのタグを記号ビューを表すキャンバスに置き換えたい (ユーザーは touchmove して描画できる) ため、リスナーをバインドしました。

問題は、最初のキャンバスだけがリスナーを持ち、描画できることです。

$(document).ready(function () {


    $('.sign').each(function () {


        var canvas = $("<canvas/>");
        canvas[0].width = 200;
        canvas[0].height = 100;
        canvas[0].setAttribute("style", "border:1px solid #000000");

        var ctx = canvas.get(0).getContext('2d');
        ctx.strokeStyle = "rgba(0,0,0,1)";
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';

        $(this).append(canvas);


        canvas.bind("touchstart", function () {

            ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY);
        });

        canvas.bind("touchmove", function () {
            ctx.lineTo(event.touches[0].pageX, event.touches[0].pageY);
            ctx.stroke();
        });

        var br = $("<br/>");
        $(this).append(br);

        var btn = document.createElement('input');
        btn.setAttribute("type", "button");
        btn.setAttribute("value", "Clear");
        btn.setAttribute("onclick", "clearSignature()");

        $(this).append(btn);

    });

});

これらのリスナーをすべてのキャンバスにバインドするにはどうすればよいですか?

ありがとう。

4

1 に答える 1

0

bindループ内を削除し、each()その後にハンドラーをアタッチするだけです (イベント委任を使用)。

$('body')
  .on("touchstart", 'canvas', function () {
    var ctx = this.getContext('2d');
    ctx.moveTo(event.touches[0].pageX, event.touches[0].pageY);
  })
  .on("touchmove", 'canvas', function () {
    var ctx = this.getContext('2d');
    ctx.lineTo(event.touches[0].pageX, event.touches[0].pageY);
    ctx.stroke();
  });

コンテキストを取得する必要があると仮定するとvar ctx = this.getContext('2d');

于 2012-10-02T11:03:08.970 に答える