Question

我一直在使用Canvas和Javascript构建时间轴。我很缺乏经验，并且一直在努力使addEventListener对画布中的某些坐标做出反应。这就是我实际工作的内容：http://january.thecarma.net/timelinexp/index.html

我要做的是当你点击其中一个年圈时，会弹出3个png。我已经设法在单击画布上的任何位置时显示它们，但我不知道如何告诉addEventListener只在用户点击某些坐标（例如：圆圈）时才显示png。问题的另一部分是，如果用户点击另一个圆圈，我希望前一个圆圈的png消失，并且新显示的圆圈的png将显示。

现在的addEventListener：

ctx.canvas.addEventListener('mousedown', function(event) { 
        //below are the images I've loaded and want to use
        var photo = new Image();
        photo.src = "photo.png";
        var papers = new Image();
        papers.src = "papers.png";
        var collab = new Image();
        collab.src = "collab.png";
        ctx.drawImage(photo, 390, 230, 80, 80);
        ctx.drawImage(papers, 530, 230, 80, 80);    
        ctx.drawImage(collab, 530, 280, 80, 80);
    });

我有一个想法，如果我将这些co-ords加载到一个数组中，然后通过事件处理程序使用For循环或条件语句（或两者？）循环直到找到匹配的co-ords。如果它们匹配，则会显示png。如果他们不这样做，没有任何反应。简而言之：

var mouseCo = [{x1,y1,x2,y2,x3,y3,x4,y4}, <------circle1 
               {x1,y1,x2,y2,x3,y3,x4,y4}, <------circle2 
               {x1,y1,x2,y2,x3,y3,x4,y4}]; <------circle3

并根据需要添加圈子和他们的合作伙伴。合作来自我链接的图片：http://imgur.com/RXIwMdO

我知道这看起来非常笨拙和令人沮丧，但我不确定如何获得合作伙伴。

无论如何在称为mouseCo的数组中加载co-ords之后，我使用mouseCo并通过addEventListener运行它：

ctx.canvas.addEventListener('mousedown', function(event) { 
//put here either a for loop or conditional statment (maybe both?) to run thru the array, check if
//co-ords click match the ones in the array and if so, show pngs, if not, do nothing.
});

你怎么看？如果有一个更好/更快的方式做到这一点，我会全力以赴 - 我怀疑这可能是一个更容易和更少吵架的方式，但我是一个菜鸟：/。谢谢你们:)）

Answer 1

您必须从事件处理程序中获取event.offsetX和event.offsetY。这些偏移量从元素左上角的0,0开始，然后以鼠标像素的距离量增加。然后你知道点击鼠标的位置。几何将帮助您了解您是否在界限范围内。对于圆，您只需要原点和半径。正如你所说的那样，你用圆圈遍历数组并检查每个圆圈是否存在，你可能无法停止，因为你的鼠标可能有2个或更多的边界。

使用addEventListener通过单击画布中的某些区域来显示图像

1 个答案: