一个老的疑问，如何确定一个点在不规则形状？ [英] An old quesition, how to determine a point in a irregular shape?

问题描述

我在学习Html5 Canvas几个星期，但上面的问题阻碍了我很长时间。

一个不规则的形状，可能是一个圆形，Rect，椭圆，多边形或由一些线和贝塞尔曲线构成的路径...

我发现一些形状的算法，如圆形，矩形和多边形，如果我在画布上使用它们，对于那些许多形状，它将是如此复杂。

我还查看了一些canvas库，例如Kinetic.js，paper.js，fabric.js等，他们都做得很好，是这么多，并在这里混合到那里，所以我不能得到主要点...

但我发现，他们都不使用'isPointInPath'方法来做这个工作。为什么？如果使用这个，我也可以做这个工作！

kinetic.js，我知道他使用getImageData确定，但奇怪的是，它的成像没有alpha alpha总是255），但它的绘制形状是半透明的，哦，没有我的大脑是没有思想。

所以我想在这里想知道如何确定一个点在画布上呈现不规则形状（可能是半透明的），即使是想法也可以帮助我。

和'isPointInPath'方法有什么区别吗？因此没有人使用它？

解决方案

我没有理由不能使用内置的函数：

  var isInPath = context.isPointInPath（x，y）
  

对于可以使用的笔触 - 笔画是分开的，因为路径可以是开放线，或者您可以使用在实际多边形外部展开的笔触宽度：

  var isInStroke = context.isPointInStroke（x，y）
  

请注意，这只适用于最后一个路径（使用 beginPath（）后）。如果你需要迭代几个路径（即形状），你需要重新构建路径（不需要中风或填充）。这可能是为什么有些人不使用它的原因。

透明度不是一个问题，因为检查路径涉及向量，而不是那些的渲染输出（颜色信息不是检查的一部分。）

以后，您将能够直接使用 Path 对象。目前这没有在任何浏览器中实现，否则会使得迭代轻而易举;所以重建最后的路径是现在的唯一方式。因为你在检查时实际上不需要绘制任何东西，所以性能是可以接受的，除非有一个zillion对象要迭代。

i'm learning Html5 Canvas for some weeks, but the problem above baffle me a long time.

An irregular shape, possible is a circle, Rect, ellipse, polygon , or a path which constructed by some lines and bezier curve...

I found some algorithm for some shape, like circle, rect, and polygon,but , if i used them in canvas, it will be so complex for those many many shape.

I also view some canvas libary,such as Kinetic.js, paper.js, fabric.js,etc, they all do this work well, but the code of they is so much and blend here to there, so I can't get main point...

but i found,all of them don't use the 'isPointInPath' method to do this work. why? if use this, I can do this work too!

kinetic.js , i knew him use the getImageData to determine, but strange, the imagedata its got is no alpha(alpha is always 255), but the shape its drew is semitransparent, oh no my brain is out of thought.

so i'm here want to know how determine a point is in a irregular shape(possibly it's semitransparent) in canvas, even a think way can help me.

and , is some preblem with the 'isPointInPath' method? thus no one use it?

解决方案

I see no reason why you can't use the built-in functions:

var isInPath = context.isPointInPath(x, y)

For strokes you can use - strokes are separate as a path can be an open line or you can have stroke widths that expands outside the actual polygon:

var isInStroke = context.isPointInStroke(x, y)

Note that this will only work for the last path (after using beginPath()). If you need to iterate several paths (ie. shapes) you need to re-construct the paths (no need to stroke or fill though). This is perhaps a reason why some don't use it.

Transparency is not an issue as checking paths involves the vectors, not the rendered output of those (color information is not part of the check).

In the future you will be able to use the Path object directly. Currently this is not implemented in any browser which otherwise would make iterating a breeze; so re-constructing last path is the only way for now. As you don't actually have to draw anything when checking, the performance is acceptable unless there are a zillion objects to iterate.

这篇关于一个老的疑问，如何确定一个点在不规则形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！