I am trying to learn to use canvas so I choose to do an exercise. Basically, all I have is a canvas that generate an image, then it puts other two images on it and generate a polygon around them, those polygon are suppoused to be clickable to create the illusion that you are clicking on the objects (if I delete the borders). Ahh, and you can zoom and move the image with the mouse.
You can see the test here.
Yesterday I asked for help to make those areas clickeable and looks like the solution is ctx.isPointInPath(). Well, I after reading the documentation like seven times I am sure this is the solution but after 10 hours of trying I am sure I am doing something wrong.
I opened a repositiry on GitHub with the 2 files for you to be able to look at the codes to help. Here is the link. =)
Here is a version of the code with the minimun to run (this version has some weird behaviors fixed on the full version that you can find on GitHub):
var canvas = document.getElementById('canvas');
//var image = document.getElementById('image');
var ctx = canvas.getContext("2d");
var image;
//set delta for zoom and keep track of current zoom
var zoomDelta = 0.1;
var currentScale = 1;
//set delta for rotation and keep of current rotation
var startX, startY, isDown = false;
var ix = 0,
iy = 0;
var intervalId = null;
var objects = [];
objects.push({
id: 'helicopter',
src: 'http://m-static.com/canvas/images/helicopter.png',
position: [-800, -600],
coordinates: {
x: [-690, -780, -780, -730, -640],
y: [-500, -500, -560, -585, -570]
},
image: null
});
function loadMedia() {
if (intervalId != null) {
// Detener intervalo
clearInterval(intervalId);
}
translateX = canvas.width;
translateY = canvas.height;
ctx.translate(translateX, translateY);
image = new Image();
image.src = 'http://ddgpartners.com/ddg-2015/wp-content/uploads/2016/05/Curbed_Andie-Dinkin-Map.jpg';
for (var i = objects.length - 1; i >= 0; i--) {
objects[i].image = new Image();
objects[i].image.src = objects[i].src;
}
image.onload = function() {
intervalId = setInterval(frameLoop, 1000 / 36);
}
//});
}
window.onmousewheel = function(event) {
var previousScale = currentScale;
if (event.wheelDelta >= 0) {
currentScale += zoomDelta;
} else {
currentScale -= zoomDelta;
}
var dx = 0;
var dy = 0;
if ((((-image.width * currentScale)) + ix + (canvas.width)) > 0) {
dx += -(((-image.width * currentScale)) + ix + (canvas.width));
}
if ((((image.width * currentScale)) + ix - (canvas.width)) < 0) {
dx += -(((image.width * currentScale)) + ix - (canvas.width));
}
if ((((-image.height * currentScale)) + iy + (canvas.height)) > 0) {
dy += -(((-image.height * currentScale)) + iy + (canvas.height));
}
if ((((image.height * currentScale)) + iy - (canvas.height)) < 0) {
dy += -(((image.height * currentScale)) + iy - (canvas.height));
}
//translate difference from now and start
ix += dx;
iy += dy;
ctx.translate(dx, dy);
}
canvas.onmousedown = function(e) {
var pos = getMousePos(canvas, e);
startX = pos.x; //store current position
startY = pos.y;
// Detectar cli
isDown = true; //mark that we are in move operation
}
window.onmousemove = function(e) {
if (isDown === true) {
var pos = getMousePos(canvas, e);
var dx = pos.x - startX;
var dy = pos.y - startY;
//translate difference from now and start
ix += dx;
iy += dy;
translateX = dx;
translateY = dy;
ctx.translate(dx, dy);
// drawImage();
//update start positions for next loop
startX = pos.x;
startY = pos.y;
}
}
//reset move operation status
window.onmouseup = function(e) {
isDown = false;
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function drawBackgroundImage() {
// Limpiar canvas
ctx.clearRect(-image.width, -image.height, image.width, image.height);
ctx.save(); //as we now keep track outselves of angle/zoom due to
//translation, we can use save/restore
ctx.scale(currentScale, currentScale);
//ctx.rotate(currentAngle * Math.PI / 180);
ctx.drawImage(image, -image.width, -image.height);
ctx.restore();
}
function drawObjectsImage() {
ctx.save(); //as we now keep track outselves of angle/zoom due to
//translation, we can use save/restore
ctx.scale(currentScale, currentScale);
for (var i = objects.length - 1; i >= 0; i--) {
// Image
ctx.drawImage(objects[i].image, objects[i].position[0], objects[i].position[1]);
//click area
ctx.beginPath();
var num = 0;
for (var j in objects[i].coordinates.x) {
if (num == 0) {
ctx.moveTo(objects[i].coordinates.x[j], objects[i].coordinates.y[j]);
} else {
ctx.lineTo(objects[i].coordinates.x[j], objects[i].coordinates.y[j]);
}
num++;
}
ctx.closePath();
ctx.stroke();
}
//ctx.rotate(currentAngle * Math.PI / 180);
ctx.restore();
}
// Ajustar altura y anchura de canvas
function canvasResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight - 92;
$('#canvas').css('top', '46px');
};
function frameLoop() {
drawBackgroundImage();
drawObjectsImage();
}
function init() {
canvasResize();
// Cargar imagen
loadMedia();
}
init();<!doctype html>
<html>
<head>
<title>Lear canvas</title>
</head>
<body>
<canvas id="canvas" data-girar="0" data-scale="0"></canvas>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
