HTML5キャンバスシェイプの選択方法は？

Question

私はいくつかの図形を描いたHTML5キャンバスを持っています。

どのような形でマウスをクリックしても、形状が選択されるはずです（少なくとも、どのような形状が選択されているかを知ることができます）。

ありがとうございます。

Answer 1

シェイプが選択されているときにイベントを持つ既存のキャンバスライブラリを使用してみてください（または自分で作成する）。

例は以下Kinetic JS libraryを使用し、以下の例では、HTML5 Canvas Region Events Exampleからのものである：

var triangle = new Kinetic.Shape(function(){ 
    var context = this.getContext(); 
    context.beginPath(); 
    context.lineWidth = 4; 
    context.strokeStyle = "black"; 
    context.fillStyle = "#00D2FF"; 
    context.moveTo(120, 50); 
    context.lineTo(250, 80); 
    context.lineTo(150, 170); 
    context.closePath(); 
    context.fill(); 
    context.stroke(); 
}); 

triangle.on("mouseout", function(){ 
    writeMessage(messageLayer, "Mouseout triangle"); 
}); 

triangle.on("mousemove", function(){ 
    var mousePos = stage.getMousePosition(); 
    var x = mousePos.x - 120; 
    var y = mousePos.y - 50; 
    writeMessage(messageLayer, "x: " + x + ", y: " + y); 
}); 

shapesLayer.add(triangle); 

var circle = new Kinetic.Shape(function(){ 
    var canvas = this.getCanvas(); 
    var context = this.getContext(); 
    context.beginPath(); 
    context.arc(380, canvas.height/2, 70, 0, Math.PI * 2, true); 
    context.fillStyle = "red"; 
    context.fill(); 
    context.lineWidth = 4; 
    context.stroke(); 
}); 

circle.on("mouseover", function(){ 
    writeMessage(messageLayer, "Mouseover circle"); 
}); 
circle.on("mouseout", function(){ 
    writeMessage(messageLayer, "Mouseout circle"); 
}); 
circle.on("mousedown", function(){ 
    writeMessage(messageLayer, "Mousedown circle"); 
}); 
circle.on("mouseup", function(){ 
    writeMessage(messageLayer, "Mouseup circle"); 
}); 

shapesLayer.add(circle); 

stage.add(shapesLayer); 
stage.add(messageLayer); 

また、私は、カーソルはマウスで検出され、いくつかの場合に含まれていますシェイプ内で、JavaScriptライブラリを使用せずに。

長方形ベースのマウスで検出：

function isCursorWithinRectangle(x, y, width, height, mouseX, mouseY) { 
    if(mouseX > x && mouseX < x + width && mouseY > y && mouseY < y + height) { 
     return true; 
    } 
    return false; 
} 

サークル系マウスで検出：

function isCursorWithinCircle(x, y, r, mouseX, mouseY) { 
    var distSqr = Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2); 

    if(distSqr < r * r) { 
     return true; 
    } 
    return false; 
} 

Answer 2

キャンバス要素のためのインターフェースを有していませんそれがDOMのようににあります。これは描画専用です。

アセットをオブジェクトとして作成し、描画ループを使用してペイントする必要があります。次に、canvas要素を忘れて、オブジェクト、オフセットなどを操作します。

Answer 3

境界矩形や数式計算を含まないピクセル精度の複雑な図形を選択する方法は非常に簡単です。

アイデアは、すべての図形を非表示のセカンダリキャンバスに複製し、各図形に一意の色を割り当てることです。元のキャンバス上でマウスオーバーまたはクリックイベントを実行すると、マウスの（x、y）座標が表示されているキャンバスに関連して保存され、その同じ座標を使用して非表示キャンバス上のピクセルカラーをルックアップします。各シェイプは隠しキャンバス上に独自の色を持つため、その色はユーザーが選択した正確な形状に対応します。

RGBは24ビットの色しか持たないため、これは約1670万のシェイプしかサポートしていませんが、それ以上のものでなければなりません。

ここではD3とキャンバスを使用した簡単な例です：http://bl.ocks.org/syntagmatic/6645345