将点击事件添加到画布或制作区域地图 [英] Add click event to canvas or make area map
问题描述
我写这个html代码：
< div id =container>
< canvas id =imageViewwidth =1181height =1181>
< p>很遗憾，您的浏览器目前不受我们的网络
应用程序的支持。< / 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）。
如果我正确理解你，当你在实际地图上点击一个像素，而不只是在地图区域时，你要调用一个函数。
方法1
您可以通过多种方式检查地图点击。您可以通过比较地图颜色值来检查点击点处的像素值，以检查其是否在您想要的区域内。
我提供了
方法2
您可以预定义一个多边形，
然后建立一个路径（ ctx.beginPath（）; 和 ctx.lineTo（..）; 等）允许使用该方法：
if（ctx.isPointInPath（x，y））{...};
这是一个很好的方法，如果你有小地区要检查。
方法3
存储仅包含 对于不可点击区域，通常是黑色（或透明），对于可点击区域，则为白色。
如果您的地图是复杂的色彩和简单的像素值
其中：您甚至可以为不同的区域提供不同的纯色值，以便您可以定义红色=美国，蓝色=阿根廷，等等。因为这些对于用户不可见，所以唯一重要的是可以识别颜色值（为此，不保存用于ICC颜色配置文件的图像）。
然后将鼠标位置从点击投影到无光泽图像（其基本上是绘制无光泽图像的离屏画布），并检查颜色（白色或其他颜色）。
方法1的示例
这是一个简单的例子，但在任何情况下，提前知道：
- 图片是从网页或来自允许跨源使用的网域的相同服务器加载的。或者，由于安全原因，您无法从地图中抓取像素。
- 您需要知道要检查的颜色或Alpha值。如果地图是实体且一切都透明，您只需要检查alpha值大于零（如在此示例中），如果不是只检查要触发动作的区域的RGB值。
HTML：
< canvas width = 725 height = 420 id =demo>< / canvas>
JavaScript：
var ctx = demo.getContext（'2d'），
img = new Image（）;
///我们需要等待图片实际加载：
img.onload = function（）{
///图片加载完毕，我们可以把它放到画布上
ctx.drawImage（this，0，0）;
///启用鼠标单击
demo.onclick = function（e）{
///调整鼠标位置相对于画布
var rect = demo.getBoundingClientRect（），
x = e.clientX - rect.left，
y = e.clientY - rect.top;
///抓取像素
var data = ctx.getImageData（x，y，1，1）.data;
///检查它的alpha值，看看我们是否在一个地图点
///这当然假设地图有透明区域。
///如果不只是检查颜色值。
if（data [3]> 0）alert（'We hit map'）;
}
}
///我们需要crossOrigin允许的图像或者我们不能抓取像素
img.crossOrigin ='anonymous';
img.src ='http://i.imgur.com/x8Ap3ij.png';
只需替换警报：
window.open（'http://google.com/'）;
如果您希望它打开一个新窗口/标签。
I write this html code :
<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>
And write this 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);
this code is make a rectangle . I want change this rectangle to a area map , that when I click on the area do something , (for example open google.com) .
If I understand you correctly you want to invoke a function when you hit a pixel on the actual map - not just in the map area.
Method 1
You can check a map click in more than one way. You can simply check for the pixel value at the click point to check if it is inside the area you want it to be by comparing the map color value.
I provided an example below for this method.
Method 2
You can pre-define a polygon which traces the outline of the map area you want to check.
Then build a path (ctx.beginPath(); and ctx.lineTo(..); etc.) to allow the use of the method:
if (ctx.isPointInPath(x, y)) { ... };
This is a good method if you have small regions to check.
Method 3
Store a separate image of the map containing only a matte (sort of an alpha map), That is usually black (or transparent) for non-clickable areas, white for clickable areas.
This is useful if your map is complex color-wise and a simple pixel value check is not trivial.
And speaking of which: you can even provide different solid color values for different areas so that you can define red color = USA, blue = Argentina, etc. As these are not visible to the user the only thing that matters is that the color value can be recognized (for this reason don't save images for this use with an ICC color profile).
Then project the mouse position from the click onto the matte image (which is basically an off-screen canvas where the matte image is drawn into) and check for the color (white or other color).
Example for method 1
This is a simple example, but in any case there are a couple of things you need to know in advance:
- That the image is loaded from same server as the page or from a domain that allow cross-origin use. Or else you cannot grab a pixel from the map due to security reasons.
- You need to know what color or alpha value to check for. If the map is solid and everything is transparent you just need to check for alpha value above zero (as in this example), and if not just check the RGB value of the region you want to trigger an action with.
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';
Just replace the alert with:
window.open('http://google.com/');
if you want it to open a new window/tab.
这篇关于将点击事件添加到画布或制作区域地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
