Fabric JS 如何实现对象拖出画布后 bounding box 仍可见

解决方案 #

核心原因是Fabric.js默认对canvas画布内容做了范围裁剪，超出canvas元素尺寸的内容会被直接隐藏，按照以下步骤配置即可稳定实现画布外显示选中边框的效果：

1. 初始化画布时添加对应配置项

const canvas = new fabric.Canvas('你的画布元素ID', {
  // 关闭画布默认的区域裁剪
  clipTo: null,
  // 关闭对象缓存，避免拖动时缓存区截断边框
  objectCaching: false,
  // 让选中边框、控制点绘制在所有画布元素最上层
  controlsAboveOverlay: true,
  width: 你的逻辑画布宽度,
  height: 你的逻辑画布高度
})

2. 覆盖Fabric自动生成的容器默认样式

/* Fabric初始化后会自动给画布外层套class为canvas-container的div */
.canvas-container {
  overflow: visible !important;
}
.canvas-container canvas {
  overflow: visible !important;
  /* 若需要边框可以超出画布更多，可放开以下配置，数值可按需调整 */
  /*
  width: calc(100% + 400px) !important;
  height: calc(100% + 400px) !important;
  transform: translate(-200px, -200px) !important;
  */
}

3. 可选：监听对象拖动事件手动触发重绘，避免偶发的边框缺失

canvas.on('object:moving', () => {
  canvas.requestRenderAll()
})

你之前缩小画布时偶然能看到画布外边框，是因为视口缩放后边框刚好落在了canvas的缓存绘制区域内，完成以上配置后即可稳定控制效果。

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