在canvas html5中创建可点击区域的问题

Question

我正在努力学习使用画布，所以我选择做练习。基本上，我只有一个画布生成一个图像，然后它将其他两个图像放在它上面并围绕它们生成一个多边形，这些多边形被允许点击以创建你点击对象的幻觉（如果我删除边界）。啊，你可以用鼠标缩放和移动图像。

您可以看到测试here。

昨天我向make those areas clickeable寻求帮助，看起来解决方案是ctx.isPointInPath()。好吧，我在阅读了七次文档后，我确信这是解决方案，但经过10个小时的尝试，我确信我做错了。

我在GitHub上打开了一个带有2个文件的存储库，以便您能够查看要帮助的代码。这是link。 =）

以下是运行minimun的代码版本（此版本在GitHub上可以找到的完整版本上修复了一些奇怪的行为）：

＆＃13;

＆＃13;

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

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;