如何在 FabricJS 中修改控件小部件的形状？答案

【问题标题】：How to modify the shape of a control widget in FabricJS?如何在 FabricJS 中修改控件小部件的形状？
【发布时间】：2019-08-21 20:49:53
【问题描述】：

我在我的 Web 应用程序中使用 FabricJS。当我绘制形状时，我注意到所有对象的控件都是矩形的。可以修改控件小部件的形状以适应对象的实际形状吗？比如说，一个带有圆形控件小部件的圆圈。

我通过了Controls Customization demo。但是没有修改控件形状的选项。

出于以下目的，我需要修改控件小部件的形状：在我的应用程序中，只要单击一个对象，它的填充颜色就会在黑色和白色之间切换。在这种情况下（参考下图），因为圆形有一个矩形控件，单击指向的像素会选择圆形而不是矩形。我还使用hasControls 属性隐藏了控件小部件的出现。因此，用户将不会对控件小部件一无所知。那么，控件小部件的形状是否可编辑？

【问题讨论】：

标签： html5-canvas fabricjs

【解决方案1】：

我认为在不编写大量额外代码的情况下，没有一种简单的方法可以使用 fabric.js 来做到这一点。 Fabric.js 总是绘制一个矩形边界框并将其用于选择控件。但是，由于您无论如何都打算隐藏控件，听起来您最好使用perPixelTargetFind。

如果为 true，则对象检测基于每个像素而不是每个边界框

这是一个快速演示：

const canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true,
  perPixelTargetFind: true
})

const circle = new fabric.Circle({
  radius: 50,
  left: 50,
  top: 50,
  stroke:'green',
  fill: 'white',
  hasControls: false,
  hasBorders: false
})

const rect = new fabric.Rect({
  width: 200,
  height: 150,
  left: 50,
  top: 25,
  stroke: 'green',
  fill: 'black',
  hasControls: false,
  hasBorders: false
})

canvas.on('mouse:down', (e) => {
  const obj = e.target
  if (obj) {
    obj.set({
      fill: obj.fill === 'white' ? 'black' : 'white'
    })
    canvas.requestRenderAll()
  }
})

canvas.add(circle, rect)
circle.bringToFront()
canvas.requestRenderAll()

body {
  background: ivory;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<canvas id="c" width="300" height="200"></canvas>

【讨论】：

这太棒了！我在 Canvas 上调度了一个鼠标按下事件，以在单击对象后取消选择该对象。看起来preserveObjectStacking 会做得很好。