将Click事件添加到画布或制作区域地图

Question

我写这个html代码：

<div id="container">
        <canvas id="imageView" width="1181" height="1181">
            <p>Unfortunately, your browser is currently unsupported by our web 
                application.</p>
        </canvas>
        <script type="text/javascript">
            window.onload = function() {
                var c = document.getElementById('imageView');
                var cxt = c.getContext('2d');
                var img = new Image();
                img.src = "map.jpg";
                cxt.drawImage(img, 0, 0);
            };
        </script>
</div>

并编写此javascript：

this.mousemove = function(ev) {
                        if (!tool.started) {
                            return;
                        }

                        var x = Math.min(ev._x, tool.x0),
                                y = Math.min(ev._y, tool.y0),
                                w = Math.abs(ev._x - tool.x0),
                                h = Math.abs(ev._y - tool.y0);
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        if (!w || !h) {
                            return;
                        }
                        context.clearRect(x, y, w, h);
                        context.strokeRect(x, y, w, h);

这段代码是一个矩形。 我想将此矩形更改为区域地图，当我单击该区域时执行某项操作（例如，打开google.com）。

Answer 1

如果我理解正确，那么您想在击中实际地图上的一个像素时调用一个函数，而不仅仅是在地图区域中。

方法1

您可以通过多种方式查看地图点击。 您可以简单地在点击点检查像素值，通过比较地图颜色值来检查像素值是否在所需区域之内。

我在下面提供了此方法的示例。

方法2

您可以预定义一个多边形，该多边形将跟踪您要检查的地图区域的轮廓。

然后构建路径（ ctx.beginPath();和ctx.lineTo(..);等）以允许使用该方法：

if (ctx.isPointInPath(x, y)) { ... };

如果要检查的区域很小，这是一个好方法。

方法3

存储仅包含遮罩 （某种Alpha贴图）的单独地图图像，对于不可点击区域，通常为黑色（或透明），对于可点击区域为白色。

如果您的地图在颜色上很复杂，并且简单的像素值检查不容易，则此功能很有用。

说到这：您甚至可以为不同区域提供不同的纯色值，以便可以定义红色=美国，蓝色=阿根廷等。由于这些对于用户不可见，因此唯一重要的是颜色值可以被识别（因此，请勿为此图像使用ICC颜色配置文件保存图像）。

然后，将单击时的鼠标位置投影到遮罩图像（基本上是将遮罩图像绘制到的屏幕外画布）上，并检查颜色（白色或其他颜色）。

方法1示例

这是一个简单的示例，但是在任何情况下，您都需要事先了解以下几点：

1. 从与页面相同的服务器或允许跨域使用的域中加载图像。 否则，出于安全原因，您无法从地图上获取像素。
2. 您需要知道要检查什么颜色或Alpha值。 如果贴图是实心的，并且所有东西都是透明的，则只需要检查alpha值是否大于零（如本例所示），如果不是，则仅检查要触发操作的区域的RGB值。

在线演示

HTML：

<canvas width=725 height=420 id="demo"></canvas>

JavaScript的：

var ctx = demo.getContext('2d'),
    img = new Image();

/// we need to wait for the image to actually load:
img.onload = function() {

    /// image is loaded and we can raw it onto canvas
    ctx.drawImage(this, 0, 0);

    /// enable mouse click
    demo.onclick = function(e) {

        /// adjust mouse position to be relative to canvas
        var rect = demo.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        /// grab a pixel
        var data = ctx.getImageData(x, y, 1, 1).data;

        /// check it's alpha value to see if we're in a map point
        /// this of course assumes the map has transparent areas.
        /// if not just check for the color values instead.
        if (data[3] > 0) alert('We hit map');
    }   
}

/// we need crossOrigin allowed image or we can't grab pixel later
img.crossOrigin = 'anonymous';
img.src = 'http://i.imgur.com/x8Ap3ij.png';

只需将警报替换为：

window.open('http://google.com/');

如果您希望它打开一个新窗口/选项卡。

Answer 2

您可以使用addEventListener侦听画布上的点击，从而将画布变成锚定链接。

然后，您可以使用window.open在新的浏览器标签中打开google。

另外，您需要使用image.onload来给图像加载时间，然后再进行绘制。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");


var img=new Image();
img.onload=function(){
    ctx.drawImage(img,0,0);
    canvas.addEventListener("click",function(){
        window.open("http://google.com");
    });
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/google.jpg";