大きな黄色の四角形が表示されるのは、画像の上に大きな黄色の四角形が描画されるためです。コードからコピー:
function drawRect() {
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(r);
ctx.drawImage(img, 0, 0, img.width, img.height, -w/2, -h/2, w, h);
ctx.fillStyle="yellow";
ctx.fillRect(-w/2,-h/2,w,h); // <-- Here.
ctx.restore();
}
これらの2行を削除すると、ハンドルはうまく動作します。ボタンとrotate
機能について
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var startX;
var startY;
var isDown = false;
var cx = canvas.width/2;
var cy = canvas.height/2;
var w;
var h;
var r = 0;
var img = new Image();
img.onload = function() {
w = img.width/2;
h = img.height/2;
draw();
}
img.src = "https://image.flaticon.com/teams/new/1-freepik.jpg";
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawRotationHandle(true);
drawRect();
}
function drawRect() {
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(r);
ctx.drawImage(img, 0, 0, img.width, img.height, -w/2, -h/2, w, h);
ctx.restore();
}
function drawRotationHandle(withFill) {
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(r);
ctx.beginPath();
ctx.moveTo(0, -1);
ctx.lineTo(w/2 + 20, -1);
ctx.lineTo(w/2 + 20, -7);
ctx.lineTo(w/2 + 30, -7);
ctx.lineTo(w/2 + 30, 7);
ctx.lineTo(w/2 + 20, 7);
ctx.lineTo(w/2 + 20, 1);
ctx.lineTo(0, 1);
ctx.closePath();
if (withFill) {
ctx.fillStyle = "blue";
ctx.fill();
}
ctx.restore();
}
function handleMouseDown(e) {
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
drawRotationHandle(false);
isDown = ctx.isPointInPath(mouseX, mouseY);
// console.log(isDown);
}
function handleMouseUp(e) {
isDown = false;
}
function handleMouseOut(e) {
isDown = false;
}
function handleMouseMove(e) {
if (!isDown) {
return;
}
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
var dx = mouseX - cx;
var dy = mouseY - cy;
var angle = Math.atan2(dy, dx);
r = angle;
draw();
}
$("#canvas").mousedown(function (e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function (e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function (e) {
handleMouseUp(e);
});
$("#canvas").mouseout(function (e) {
handleMouseOut(e);
});
body {
background-color: ivory;
}
#canvas {
border:1px solid red;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<p>Rotate by dragging blue rotation handle</p>
<canvas id="canvas" width=300 height=300></canvas>
、私はあなたがそれを達成したいのか分かりません。
開発者コンソールでエラーをチェックしてみましたか? –
はい、私はして、それはfalseを返します。構文エラーはありません。回転ハンドルとして認識されるはずの領域はfalseを返すので、もはやtrueを返さないので、もはやハンドラを使って回転することができません。なぜ私はそれが今ではfalseを返すのか分かりません? –