方法1

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的示例

这是一个简单的例子，但无论如何有一些事情你需要提前知道：

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

<强> ONLINE DEMO HERE

<强> 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";

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

2 个答案:

方法1

方法2

方法3

方法1的示例