检查html画布上特定区域中的点位置 [英] Check a point location in a particular area on html canvas

问题描述

我想检查点（x，y）是否在画布上的特定区域。例如，如果我在html画布上有一个100X100的区域，那么我想找到一个点（x，y）是否位于该区域内或它是否在该区域之外。
这个检测是使用javascript和jquery完成的。
Thanx。

I want check whether a point(x,y) is in a particular area on a canvas. For example if I have an area of 100X100 on an html canvas, then i want to find that whether a point (x, y) lies inside this area or it is outside the area. This detection is to be done using javascript and jquery. Thanx.

推荐答案

取决于您需要它的用例：

depends on what use case you need it for:

1. MouseOver / Click：只要您的画布是唯一具有移动元素的东西，并且您不需要支持safari / iOS，那么良好的ol'塑造的图像映射实际上可以完成工作。 （使用图像映射在画布的尺寸上拉伸1px * 1px透明gif）



2. 任意点（包括鼠标）：使用公式计算点是否在内部或在多边形之外。以下脚本（虽然不是来自我）解决了这个问题：

1. MouseOver/Click: as long as your canvas is the only thing with moving elements and you DO NOT need support for safari / iOS an good ol' fashioned image map actually does the job. (a 1px*1px transparent gif stretched over the dimensions of the canvas using the image map)

2. Any Point (including mouse): use a formula to calculate if the point is inside or outside the polygon. the following script (while not from me) solves this:

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

在他的页面上，Jonas还举例说明了如何使用它。基本上poly是包含多边形点的对象数组，pt是一个具有要测试点的对象：

on his page, Jonas also gives an example of how to use it. basically poly is an array of objects containing the points of the polygon and pt is an object with the point you want to test:

var polygon = [
    {x: 0, y: 0},
    {x: 0, y: length},
    {x: length, y: 10},
    {x: -length, y: -10},
    {x: 0, y: -length},
    {x: 0, y: 0}
];

var testpoint= {x: 1, y:2};
if(isPointInPoly(polygon,testpoint)) { /* do something */ }

如果它是用于鼠标定位你应该将整个事物绑定到mousemove，这也可以在mouseenter / mouseleave上被禁用 - 画布节点的所有事件

if it's for mouseposition you should bind the whole thing to mousemove which again can be en-/disabled upon mouseenter/mouseleave - all events of the canvas node

任何point：使用canvas函数isPointInPath（），如下所述： http： //canvas.quaese.de/index.php?nav=6,42&doc_id=31 虽然AFAIK只有在画布上只有一个路径（你可以使用多个画布）时才有效 - 或者每个都重绘一次多边形并在测试时进行测试。

any point: use the canvas function isPointInPath() as explained here: http://canvas.quaese.de/index.php?nav=6,42&doc_id=31 Though AFAIK this only works if you have only one path on the canvas (you could use multiple canvas's) - or repaint each polygon and test it while doing so.

我个人更喜欢选项2.如果你需要进一步帮助获取鼠标协调谷歌搜索应该在stackoverflow上给你正确的页面（或参见右边的相关部分）

I personally prefer option 2. if you need further help on getting the mouse coordinates a google search should give you the right pages here on stackoverflow (or see the "related" section to the right)

这篇关于检查html画布上特定区域中的点位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！