时间戳

首页 > 解决方案 > 如何在 FabricJS 中修改控件小部件的形状？

html5-canvas - 如何在 FabricJS 中修改控件小部件的形状？

问题描述

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

我浏览了控件自定义演示。但是没有选项可以修改控件小部件的形状。

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

标签： html5-canvasfabricjs

解决方案

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

当为真时，对象检测发生在每个像素的基础上，而不是每个边界框上

这是一个快速演示：

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>

推荐阅读