Drehen Funktion funktioniert nicht auf Mouse-Down?

Question

Ich verfolge diesen Code So dreht Funktion in meinem Malprogramm zu implementieren: http://jsfiddle.net/QqwKR/412/

Allerdings ist das Bild img zeigt nicht geladen werden und stattdessen ein gelb gefülltes Rechteck auf.

Auch wenn ich die Drehfunktion hinzufügen, stoppt der Code arbeiten:

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

} 

In html I fügen Sie folgendes:

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

Irgendwelche Ideen, warum dies geschieht?

Answer 1

Ein großes gelbes Rechteck zeigt, weil Sie ein großes gelbes Rechteck auf das Bild zeichnen. Kopiert aus dem code:

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

Wenn Sie diese beiden Zeilen entfernen, funktioniert der Griff ganz gut.

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>

Im Hinblick auf die Schaltfläche und die rotate Funktion, habe ich keine Ahnung, was Sie mit, dass erreichen wollen.