Javascript 画布命中测试：处理元素边界和抗锯齿 设置

作为用Javascript编写的web矢量编辑工具的一部分，我正在使用类似于的命中画布策略实现命中测试。 对于大多数情况，它工作得非常好：我画了两次形状（一次在显示画布上，一次在点击画布上）

在查询画布时，我检查命中画布的悬停像素，并提取交互信息（即存储了哪个对象id）

问题 这在形状内部效果很好，但在边界处存在令人痛苦的缺陷，抗锯齿使存储的数据无效（它与以前存在的任何背景数据混合）。 有没有处理这个数据边界问题的好策略

在不禁用画布方法的抗锯齿的情况下，我们必然会在重叠区域中有一些边界区域，这些区域将存储来自多个区域的合并数据

简单的场景 在二进制场景中（一些前景与背景），这可以缓解，因为我们可以假设背景没有任何值，任何值都会变成一些前景

真实情况 但是，在多个形状在背景上相互重叠的一般场景中，是否有合理的错误检测策略？（或错误纠正，但我认为这更难）

如果我可以判断数据无效（即，它由抗锯齿引起的扰动数据组成），那么我可以对边界上的这几个像素使用不同的策略。但我觉得，在我们可以有许多重叠形状的一般情况下，无法判断我提取的数据是否有效

当然，一个解决方案是不使用命中画布。但我想知道人们是否已经找到了一个解决方案，使用点击画布，因为它们似乎非常适合处理复杂的几何图形

抗锯齿 理想的解决方案是禁用抗锯齿功能，我认为画布方法[*]不可能做到这一点

[*]我知道我们可以在渲染图像时禁用过滤（例如使用

imageSmoothingEnabled=false

或使用

图像渲染：像素化

重新缩放），但这些都不能解决绘制形状/路径时的抗锯齿问题