CODEWITHSUNDEEP
javascripthtml
Fatima Mustafa
Fatima Mustafa

Reputation: 55

Rotate functionality is not working on onmousedown?

So I am following this code to implement rotate function in my paint program: http://jsfiddle.net/QqwKR/412/

However, the image img doesn't load up and instead a yellow filled rectangle shows up.

Also when I add the rotate function, the code stops working:

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 add the following:

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

Any ideas why this is happening?

Upvotes: 0

Views: 46

Answers (1)

Tamas Hegedus
Tamas Hegedus

Reputation: 29926

A big yellow rectangle shows up because you draw a big yellow rectangle over the image. Copied from the 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();
}

If you remove those two lines, the handle works just fine.

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>

Regarding the button and the rotate function, I have no idea what you want to achieve with that.

Upvotes: 1

Related Questions