1

DOM Image onclick イベントを機能させることに失敗しています。

var context = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.src = "foo.png"
image.onclick = function(e) { console.log("clicked"); }


setInterval(function() {

context.drawImage(image, 100, 100, 50, 50);    

};

画像をクリックしてもログ メッセージが表示されないのはなぜですか。開発者ツールでは、画像の onclick 関数が null ではないことがわかります。

4

4 に答える 4

2

はい、ムサが言ったこと...と他のいくつかのこと。

コードへのいくつかの変更

  • Image.src=”foo.png” は image.onclick 関数の後に来る必要があります
  • Context.drawImage は image.onclick 関数内にある必要があります
  • 私が見る限り、setIntervalは必要ありません

これを試して：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var context=document.getElementById("canvas").getContext("2d");

    var image=new Image();
    image.onload=function(){
       context.drawImage(image,0,0);
    }
    image.src="http://i.imgur.com/nJiIJIJ.png";

    document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
于 2013-03-11T04:51:26.087 に答える
1

キャンバスに追加された特定の画像にonclickを設定することはできません。キャンバス全体にonclickを設定できるので、サードパーティのjsを使用する必要があります。そうでない場合は、キャンバスの画像をクリックしたことがわかる計算を行う必要があります。

于 2013-03-11T05:07:23.677 に答える
1

(キャンバス上で onclick を使用して) レイをキャンバスにキャストし、画像がレイと交差するかどうかを手動でテストできます。あなたは書くべきです

objectsUnderPoint( x, y );

x、y で光線と交差するすべての画像の配列を返す関数。

これは、3D エンジンでも通常行われる方法です。もちろん、交差テストのために画像のプロパティとして画像の位置を保持する必要があります。

于 2014-07-23T18:09:35.957 に答える
1

他のユーザーは正しいです。

キャンバスに描画する画像は DOM 要素ですが、DOM に格納されていない位置にレンダリングされます。

これは、その位置にアクセスしてマウスの位置と比較できるという意味ではありません。

ここでは外部ライブラリを使用していますが、必要なことは実行します: http://jsfiddle.net/Saturnix/cygUH/

使用したライブラリです。

コードを投稿せずに jsfiddles へのリンクを投稿することはできないため、ここに私が作成したスクリプトを示します。

function demo(g) {
    g.ctx.font = "bold 16px Arial";

    g.draw = function () {
        g.ctx.clearRect(0, 0, g.width, g.height)

        var posX = 0;
        var posY = 0;
        g.ctx.drawImage(image, posX, posY);

        if (g.mouseX > posX && g.mouseX < image.width &&
            g.mouseY > posY && g.mouseY < image.height &&
            g.mousePressed)
        g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);

    }
}
于 2013-03-11T14:47:39.967 に答える