10

キャンバスに線を描くための簡単なチュートリアルで遊んでいます。HTML5jQueryに基づいているため、図面に多くの効果を簡単に追加できます。

ポイントをクリック/ホバー可能にして、クリック/ホバー（マウスエンター/マウスリーブ）時にjquery効果を追加するにはどうすればよいですか？ポイントはによって描かれます

c.fillStyle = '#333';

for(var i = 0; i < data.values.length; i ++) {
    c.beginPath();
    c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true);
    c.fill();
}

jqueryセレクターを追加する方法は？基本的には、クリックまたはホバーしたときにポイント座標を表示したいと思います。

4

2 に答える 2

16

問題は、jQueryがキャンバス上の描画ではなくDOMで機能することです。これらのポイントをどこかに保存し、canvas要素にカーソルを合わせて、キャンバスに対するマウスの座標を確認する必要があります（つまり、キャンバスの左上隅にマウスを置くと、座標は[ 0,0]）はポイント/シェイプの領域内にあります。その場合、ポイントをマウスでホバーすると、効果を表示できます。

よりよく理解するための擬似コード：

// adding shapes to the canvas
var shapes = [];  // make that rects for simplicity.
For (condition):
    shapes.push ( new Rect(x,y,width,height) );
    canvas.rect( x, y, width, height );

// testing hover.
$("#canvas").mousemove(function(e) {
    var offsetX = e.pageX - $(this).position().left;
    var offsetY = e.pageY - $(this).position().top;

    Foreach shape in shapes:
        if( shape.contains(offsetX, offsetY) )    // a fictious method, implement it yourself...lookup for collision detection; not exactly that but something like that...
            Mouse hovers! do something great.
});

わかりました。ポイントが長方形内に含まれているかどうかを確認するには、次のようなものを使用できます。

function contains(rect, x, y) {
    return (x >= rect.x &&
            x <= rect.x + rect.width &&
            y >= rect.y && 
            y <= rect.y + rect.height )
}
于 2012-05-19T14:19:41.483 に答える
9

キャンバスに追加するオブジェクトでマウスイベントを処理するという大変な作業をすべて抽象化するEaselJSのようなフレームワークを使用できます。

于 2012-05-19T16:05:50.840 に答える