javascript - 旋转功能在 onmousedown 上不起作用？

Question

所以我按照这段代码在我的绘画程序中实现旋转功能: http://jsfiddle.net/QqwKR/412/

但是，图像 img 不会加载，而是显示一个黄色填充的矩形。

此外，当我添加旋转功能时，代码停止工作:

function rotate() {

flag = 4;

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";

} 

在 html 中我添加以下内容:

<button onclick="rotate()" style="height:100px;width:100px;">rotate</button>

有什么想法为什么会发生这种情况吗？

Answer 1

出现一个大的黄色矩形，因为您在图像上绘制了一个大的黄色矩形。从代码中复制:

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();
}

如果删除这两行， handle 就可以正常工作。

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>

关于按钮和旋转功能，我不知道你想用它来实现什么。