0

私はこのキャンバスのマウスダウンイベントを持っています:

$('#canvas').mousedown(function(e) {
    var coords = canvas.getMousePos(e); // user helper function

    if (coords.x >= 0 && coords.x <= 16 && coords.y >= 32 && coords.y <= 48) {
        tool = "fill";
    } else if (coords.x >= 16 && coords.x <= 32 && coords.y >= 32 && coords.y <= 48) {
        tool = "circle";
    }
});

また、ドキュメント準備機能のように、このキャンバスに画像を描画しています。

var imgCircle = new Image();
imgCircle.src = "circle.png";

imgCircle.onload = function() {
    toolboxContext.drawImage(imgCircle, 16, 32);
}

if ステートメントでそのようなハードコードされた値を使用するのは好きではありません。キャンバス内の画像のローカル座標を取得するか、実際にその画像をクリックするためのイベントを登録する方法があるかどうか疑問に思っていました。読んでくれてありがとう。

4

3 に答える 3

2

オブジェクトに直接イベントを登録することはできませんが、次のようにキャンバスにイベントを登録するのは簡単です

canvas.addEventListener("mousedown", function(e) {

（おそらく「マウスアップ」にもっと興味があります）

そして、キャンバス内の座標を取得できます

e.pageX-$(canvas).offset().left

と

e.pageY-$(canvas).offset().top

(ここではキャンバスの簡単なクロスプラットフォーム配置のために jQuery を使用していますが、標準の JavaScript を使用できます)

その後、どこかに保持しなければならない画像の位置と比較するだけです。私は個人的にその効果のために Rect クラスを使用します:

function Rect(x,y,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}
Rect.prototype.contains = function(x, y) {
    return x>=this.x && x<=this.x+this.w && y>=this.y && y<=this.y+this.h;
};
于 2012-06-29T17:37:23.177 に答える
0

これがDOM APIのように機能することを期待していると思います。キャンバス コンテキスト オブジェクトは、ピクセルのグリッド上にオブジェクトを描画するためのメソッドのバンドルにすぎません。ピクセルのグリッドは、保存される唯一の実際の状態情報です。座標を保持する正方形または長方形のオブジェクトはありません。地図上に四角形と円をスプラッティングするための単なるメソッド。その情報の変更を維持して対応することは、DIY であるか、それを行うライブラリを調べる必要があります。

ただし、jQuery を使用してオンザフライでジェネリック オブジェクトの新しいイベントを書き込んだりリッスンしたりできます。

var someObj = {};
//bind - unfortunate choice for the generic listening method
$(someObj).bind('HiSomeObj',function(){ alert('hi, whoever triggered this event on me'); });
$(someObj).trigger('HiSomeObj'); //'hi, whoever triggered this event on me'

//note how in the following trigger below how I add properties to the event object

これを利用した大雑把な DIY アプローチを次に示します。

//your constructor object - assumes 16px diameter (mostly reusing your code)
function imgCircleObjConstructor16px(xArg, yArg){

    var imgCircle = new Image(),

     //following 2 are var defs and public for convenience

    diameter = this.diameter = 16, //hard-coded for now
    coords = this.coords = [xArg,yArg],
    that = this; //locks down reference to instance for use in JQ

    imgCircle.src = "circle.png";

    this.draw = function(x,y){
        //some function that clears canvas or resets context for redraws
        clearCanvasOrContext();

        toolboxContext.drawImage(imgCircle, x, y);
        this.coords = [x,y];
    }

    $('#canvas').mousedown(function(e) {
        var mouseXY = canvas.getMousePos(e);
        if( mouseXY.x >= coords[0]) && mouseXY.x <= coords[0]+diameter &&
            mouseXY.y >= coords[1] && mouseXY.y <= coords[1] ){

            //trigger custom events with JQ 'trigger' method
            //can't use 'this' because it refers to the jq object for #canvas here
            $(that).trigger('circleBoundingBoxClicked', { someProperty:'optional' } );

            //note: second arg in trigger func serves no purpose
            //just provided as an example of adding properties to event objects

        }
    }
    //might as well tell the circle to draw itself when the object is instantiated:
    this.draw();
}

var myCircle = new imgCircleObjConstructor16px(16,32);

//listen to custom events with 'bind' method
$(myCircle).bind('circleBoundingBoxClicked', function(e){

    var circleObj = e.target; //JQ puts object args from the $ func under target property
    alert('Circle Bounding box at x: '+circleObj.coords[0]+', y:'+circleObj.coords[1]
        +' was clicked. someProperty value: ' + e.someProperty);

//After you fix whatever syntax goofs I didn't test for, this should alert when clicked:
//'Circle Bounding box at x: 15, y:32 was clicked. someProperty value: optional'

} );

myCircle.draw メソッドを使用して円を再描画すると、イベント リスナーは新しい座標に応答する必要があります。

于 2012-06-29T19:15:05.493 に答える