問題12
中心が(150, 150)、半径50の円を塗りつぶしなさい。
塗りつぶす色はマゼンタ色(#ff00ff)であること。
円をドラッグで動かせるようにしなさい。
円内をダウンした時のみ円を動かせること。
円のドラッグ中にマウスカーソルがcanvasの外に出た場合、円をドラッグを終了すること。
なお、以下のHTMLを使うこと。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題12</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
$('#my-canvas').mousedown(e => {
});
$('#my-canvas').mousemove(e => {
});
$('#my-canvas').mouseup(e => {
});
$('#my-canvas').mouseout(e => {
});
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>
解答
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>問題12</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(() => {
const RADIUS = 50; // 円の半径
let posX = 150, // 円の中心のX座標
posY = 150, // 円の中心のY座標
dragFlag = false, // 円をドラッグ中か
deltaX = 0,
deltaY = 0;
drawCircle(posX, posY);
$('#my-canvas').mousedown(e => {
// canvasの左上隅を原点とする座標を求める
const downX = e.offsetX,
downY = e.offsetY;
const ret = hitCircle(posX, posY, RADIUS, downX, downY);
if(!ret) {// 円内をダウンしていないので処理終了
dragFlag = false;
return;
}
// 円内をダウンしたので、フラグをtrueにする
dragFlag = true;
// ダウン位置を始点とし、円の中心位置を終点とするベクトルを求める
deltaX = posX - downX;
deltaY = posY - downY;
});
$('#my-canvas').mousemove(e => {
if(!dragFlag) {// 円がドラッグ中でない
return;
}
// canvasの左上隅を原点とする座標を求める
const downX = e.offsetX,
downY = e.offsetY;
// 円の中心位置を更新する
posX = downX + deltaX;
posY = downY + deltaY;
// 円を描画する
drawCircle(posX, posY);
});
$('#my-canvas').mouseup(e => {
// マウスボタンが離されたので、ドラッグ中フラグをfalseにする
dragFlag = false;
});
$('#my-canvas').mouseout(e => {
// マウスカーソルがcanvasの外に出たので、ドラッグ中フラグをfalseにする
dragFlag = false;
});
// 円内をダウンしたか調べる
function hitCircle(posX, posY, radius, downX, downY) {
// (posX, posY) と (downX, downY) の距離を求める
const dist = Math.sqrt((posX - downX) * (posX - downX) + (posY - downY) * (posY - downY));
if(dist <= radius) {// 円内
return true;
} else {// 円外
return false;
}
}
function drawCircle(posX, posY) {
// コンテキストを取得
const ctx = $('#my-canvas')[0].getContext('2d');
// 現在の描画状態を保存する
ctx.save();
// canvasをクリア
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 塗りつぶしの色をマゼンタ色にする
ctx.fillStyle = '#ff00ff';
ctx.setTransform(1, 0, 0, 1, posX, posY);
ctx.beginPath(); // 現在のパスをリセットする
ctx.arc(0, 0, RADIUS, 0, Math.PI*2, true); // 円を描画する
ctx.closePath(); // パスを閉じる
ctx.fill(); // 現在のパスを塗りつぶす
// 描画状態を保存した時点のものに戻す
ctx.restore();
}
});
</script>
</head>
<body>
<canvas id="my-canvas" width="500" height="300"></canvas>
</body>
</html>
円がドラッグで動きました。
解説
みなさん、プログラムは少し慣れてきたと思うので
今回はアルゴリズムベース(どういう風に実現するか)で説明していきます。
まずは、マウスダウン時に円の中か外であるか判定する必要があります。
単純の距離を計算して、それが50以内かどうかで判定しましょう。(hitCircleメソッドに該当)
$(x_1,y_1)$と$(x_2,y_2)$の距離は$\sqrt{(x_1-x_2)^2+(y_1-y_2)^2}$で計算できます。
次に、円の中をダウンした場合、ドラッグ中であるフラグを立てて、
ダウン位置から円の中心位置までのベクトルを求めます。
これは次に発生するであろうmosuemove(マウスを動かしたとき)時に円の座標を更新するためです。
下図を見てください。
左円がmousedown時、真ん中と右がmousemove時です。
mousemove時に取得できる座標は水色のxですが、更新するのは緑色の丸の円の中心座標ですので
その差分を足してあげる必要があります。
最後に円を描画します。
これは問題10,問題11とほぼ同じです。
これで終わりといいたいところですが
mouseup(マウスボタンを離した時)に円のドラッグを終了させたいので
ドラッグ中のフラグをfalseにする必要があります。
また、mouseout(canvasの外にマウスカーソル出た)時も
ドラッグ中のフラグをfalseにします。
補足
解答では、mousemoveで円を描画していますが
mousemove時に描画するのではなく、
mousemove時は円の位置情報だけ更新しておいて、requesAnimationFrameで描画すると、
パフォーマンスが良くなります。(問題11参照)
知っていて損はないテクニックです。