一个老问题，如何确定不规则形状中的点？

Question

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

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

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

我还查看了一些画布库，例如 Kinetic.js、paper.js、fabric.js 等，它们都做得很好，但是它们的代码太多了，在这里混合在一起，所以我可以不明白重点...

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

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

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

而且，'isPointInPath' 方法有问题吗？所以没人用吗？

Answer 1

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

var isInPath = context.isPointInPath(x, y)

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

var isInStroke = context.isPointInStroke(x, y)

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

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

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