40

ユーザーが赤いバブルの内側をクリックしたことを検出するにはどうすればよいですか?

正方形のフィールドのようであってはなりません。マウスは実際に円の内側になければなりません:

画像

コードは次のとおりです。

<canvas id="canvas" width="1000" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")

var w = canvas.width
var h = canvas.height

var bubble = {
  x: w / 2,
  y: h / 2,
  r: 30,
}

window.onmousedown = function(e) {
    x = e.pageX - canvas.getBoundingClientRect().left
    y = e.pageY - canvas.getBoundingClientRect().top

    if (MOUSE IS INSIDE BUBBLE) {
        alert("HELLO!")
    }
}

ctx.beginPath()
ctx.fillStyle = "red"
ctx.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI*2, false)
ctx.fill()
ctx.closePath()
</script>
4

4 に答える 4

60

円は、中心点からの距離が「R」に等しいすべての点の幾何学的位置です。

距離が半径の「R」以下の点を見つけたいとします。

2次元ユークリッド空間での距離方程式は ですd(p1,p2) = root((p1.x-p2.x)^2 + (p1.y-p2.y)^2)。

あなたpと円の中心との間の距離が半径よりも小さいかどうかを確認してください。

位置と点に半径rと中心を持つ円があり、その点が円内にあるかどうかを確認したいとしましょう。(x0,y0)(x1,y1)

d((x0,y0),(x1,y1)) < rどちらが次のように変換されるかを確認する必要があります。

Math.sqrt((x1-x0)*(x1-x0) + (y1-y0)*(y1-y0)) < r

JavaScript で。

(x0,y0)これで、これらすべての値がbubble.xでありbubble.y、(x1,y1)でxあり、 であることがわかりyました。

于 2013-05-28T13:06:58.047 に答える
4

代替手段（必ずしも有用であるとは限りません。つまり、最後に（再）定義されたパスに対してのみ機能するという意味ですが、オプションとして取り上げます）：

x = e.pageX - canvas.getBoundingClientRect().left
y = e.pageY - canvas.getBoundingClientRect().top

if (ctx.isPointInPath(x, y)) {
    alert("HELLO!")
}

パスはところでできます。任意の形状になります。

詳細:
http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath

于 2013-05-28T15:28:53.397 に答える