如何在 FabricJS 中修改控件的形状？

Question

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

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

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

Answer 1

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

When true, object detection happens on per-pixel basis rather than on per-bounding-box

这是一个快速演示：

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>

如何在 FabricJS 中修改控件的形状？

How to modify the shape of a control widget in FabricJS?

html5-canvas

fabricjs