从光标位置的单个对象检索RGBA

Question

我有一个带有多个SVG对象的fabricjs画布，这些对象可能重叠也可能不重叠。

某些SVG对象具有透明区域，因此对象A的透明区域可能位于对象B的填充区域之上，如下图所示：

在上图中，黑色边框表示SVG对象的边界框。

点X＆amp; Y在对象选择期间说明了光标位置。

我有兴趣检索光标位置的RGBA值，以便考虑所选对象。

如果用户点击了点X或点Y，则所选对象（具有fabricjs的正常行为）是对象A，因为对象A是最顶层的对象，用户已在边界框内单击。

我想要做的是在光标位置检索对象A 的RGBA值（或者只做alpha值），即在点X和点Y处，对象A是透明的。

从fabricjs文档中我可以收集到的内容 - 我只能看到一种方法从画布整体上获取RGBA值在光标位置 - 而不是特定对象。这意味着点X是透明值，而点Y是蓝色，具有完全不透明度。

var pixelData = this.canvas.getContext().getImageData(pointer.x, pointer.y, 1, 1).data;

我正在寻找的是一种在特定光标位置查询单个对象的像素数据的方法，可能类似于：

var pixelData = selectedObject.getImageData(pointer.x, pointer.y, 1, 1).data;

我知道fabricjs可能不会直接支持这样的功能，但我想知道是否有人有一个很好的方法来实现这一点，以便我可以准确地确定用户何时点击透明区域< / em>一个对象。

我想假设我正在使用SVG图像，解决方案可能与确定相对于SVG路径的光标位置以及确定用户是否已点击填充的部分有关SVG，但我只是有点困难，找出解决问题的最佳方法，所以我真的愿意接受任何建议！

如果有人有任何指示，我们非常感激！