旋轉功能不適用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(); 
} 

如果你刪除這兩行，句柄工作得很好。

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>

關於按鈕和rotate功能，我不知道你想達到與什麼。