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.Image，请使用fabric.loadSVGFromURL。

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

1 个答案: