0

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

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

我为某些形状找到了一些算法，比如圆形、矩形和多边形，但是，如果我在画布中使用它们，那么对于许多形状来说它会非常复杂。

我还查看了一些画布库，例如 Kinetic.js、paper.js、fabric.js 等，它们都很好地完成了这项工作，但是它们的代码太多并且混合在一起，所以我无法获得重点...

但我发现，他们都没有使用“isPointInPath”方法来完成这项工作。为什么？如果使用这个，我也可以做这个工作！

kinetic.js ，我知道他用 getImageData 来确定，但奇怪的是，它得到的图像数据没有 alpha（alpha 始终为 255），但它绘制的形状是半透明的，哦不，我的大脑已经想不通了。

所以我在这里想知道如何确定一个点在画布中的不规则形状（可能是半透明的），即使是一种思考方式也可以帮助我。

并且，“isPointInPath”方法是否存在问题？因此没有人使用它？

4

1 回答 1

1

我看不出为什么你不能使用内置函数：

var isInPath = context.isPointInPath(x, y)

对于您可以使用的笔划 - 笔划是分开的，因为路径可以是一条开放的线，或者您可以将笔划宽度扩展到实际多边形之外：

var isInStroke = context.isPointInStroke(x, y)

请注意，这仅适用于最后一条路径（使用后beginPath()）。如果您需要迭代多个路径（即形状），则需要重新构建路径（尽管不需要描边或填充）。这也许是有些人不使用它的原因。

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

将来您将能够Path直接使用该对象。目前这没有在任何浏览器中实现，否则会使迭代变得轻而易举；所以重建最后一条路径是目前唯一的方法。由于您实际上不必在检查时绘制任何东西，因此性能是可以接受的，除非有无数对象要迭代。

于 2013-06-24T05:42:37.957 回答