2

我写了这段 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）。

4

2 回答 2

7

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

方法一

您可以通过多种方式检查地图点击。您可以简单地检查点击点处的像素值，通过比较地图颜色值来检查它是否在您想要的区域内。

我在下面为此方法提供了一个示例。

方法二

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

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

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

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

方法三

存储仅包含遮罩（某种 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/');

如果你想让它打开一个新窗口/标签。

于 2013-10-03T07:05:50.637 回答
0

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";
于 2013-10-02T15:49:05.397 回答