如何在FabricJS中点击图形负空间时不选中对象？

是的，FabricJS可以实现这个需求，只需要通过两个关键配置修改对象的点击检测逻辑：

核心配置说明 #

• perPixelTargetFind: true：开启逐像素的点击检测，替代默认的包围盒检测，让FabricJS只识别图形实际填充的像素区域。
• fillRule: 'evenodd'：设置填充规则为"奇偶规则"，对于星形这类包含负空间的图形，该规则会将内部空白区域视为非填充区域，点击时不会触发对象选中。

修改后的完整代码 #

JavaScript #

const canvasEl = document.getElementById("canvas")
var canvas, object_star

init()
drawObjects()   

function init() {
  canvas = new fabric.Canvas(canvasEl)
  let width = document.getElementById("canvasWrapper").clientWidth
  let height = document.getElementById("canvasWrapper").clientHeight
  canvas.setWidth(width)
  canvas.setHeight(height)
}

function drawObjects() {  
  let points = starPolygonPoints(5,50,25)
  object_star = new fabric.Polygon(points, {
    stroke: 'black',
    fill: 'yellow',
    left: 50,
    top: 50,
    strokeWidth: 4,
    strokeLineJoin: 'bevel',
    perPixelTargetFind: true,
    fillRule: 'evenodd'
  }, false)
  canvas.add(object_star)
}

function starPolygonPoints(spikeCount, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3
  var cx = outerRadius
  var cy = outerRadius
  var sweep = Math.PI / spikeCount
  var points = []
  var angle = 0
  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius
    var y = cy + Math.sin(angle) * outerRadius
    points.push({x: x, y: y})
    angle += sweep
    x = cx + Math.cos(angle) * innerRadius
    y = cy + Math.sin(angle) * innerRadius
    points.push({x: x, y: y})
    angle += sweep
  }
  return points
}

CSS #

#canvasWrapper {
  width: 100%;
  height: 100%;
}

#canvas {
  background-color: pink;
}

HTML #

<script src="https://cdn.jsdelivr.net/npm/fabric"></script>

<div id="canvasWrapper">
  <canvas id="canvas" width="400" height="400"></canvas>
</div>

效果说明 #

修改后，点击星形的中心空白区域（负空间）时，不会选中该星形对象；只有点击星形的黄色填充区域或黑色描边时，才会触发选中。

内容的提问来源于stack exchange，提问作者Kalnode