javascript - FabricJS 检查图像是否在多边形内部

Question

有没有办法检查一个对象(在我的示例图像中)是否位于另一个对象(在我的示例中是多边形)内部。我创建了一个小jsfiddle:http://jsfiddle.net/onot3w11/

这是我的代码，基本上添加一个多边形和一个图像并测试图像是否在多边形内部:

/*_________adding shapes____*/
var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 30,
  opacity: 0.85,            
  width: 150,
  height: 150,
});


var pol2 = new fabric.Polygon([
  {x: 300, y: 50},
  {x: 300, y: 250},
  {x: 150, y: 250},
  {x: 150, y: 50} ], {
    left: 20,
    top: 100,
    angle: 0,
    fill: 'grey',
    opacity: 0.1
  }
);
canvas.add(pol2);
canvas.add(imgInstance);

/*_________testing if image is inside polygon____*/
console.log(imgInstance.isContainedWithinObject(pol2));

圣诞树位于多边形内部，但由于其边界，“isContainedWithinObject”在控制台中返回“false”。还有另一个函数，仅当两个对象彼此相交时才返回 true(但如果一个对象完全位于另一个对象 http://fabricjs.com/intersection 内，则返回 false)。也许我可以结合这两个功能来得到我想要的，但我希望有一个更简单的解决方案。

我尝试了一下，认为如果某个对象位于对象内部，最好的解决方案是获取它的中心并检查该点是否包含在对象中。有没有办法获得图像的中心？

Answer 1

点赞本期:https://github.com/kangax/fabric.js/issues/601

小想法:您的图像是 SVG。使用 fabric.loadSVGFromURL，而不是 fabric.Image。