Fabric.js isPointInsidePolygon在vue 中用法

Fabric.js 是一个基于 Canvas 的图形库，它提供了许多 API 来创建和操作图形对象。isPointInsidePolygon 是 Fabric.js 中的一个方法，用于判断一个点是否在多边形内。

在 Vue 中使用 Fabric.js，需要先安装 Fabric.js 库：

npm install fabric --save

然后在 Vue 组件中引入 Fabric.js：

import { fabric } from 'fabric';

接下来，可以在组件中创建一个 Fabric.js 的 Canvas 对象：

export default {
  name: 'MyCanvas',
  data() {
    return {
      canvas: null
    };
  },
  mounted() {
    this.canvas = new fabric.Canvas('canvas');
  }
}

在 Canvas 中创建一个多边形对象：

const polygon = new fabric.Polygon([
  {x: 100, y: 100},
  {x: 200, y: 100},
  {x: 200, y: 200},
  {x: 100, y: 200},
], {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2,
  selectable: false
});

this.canvas.add(polygon);

最后，在 Canvas 上添加鼠标事件，判断鼠标点击的点是否在多边形内：

this.canvas.on('mouse:down', (event) => {
  const pointer = this.canvas.getPointer(event.e);
  if (fabric.util.isPointInsidePolygon(pointer, polygon.points)) {
    console.log('在多边形内');
  } else {
    console.log('不在多边形内');
  }
});

这样，当鼠标在 Canvas 上点击时，就可以根据 isPointInsidePolygon 方法的返回值来判断鼠标点击的点是否在多边形内。