Vue3 + FabricJS问题：响应式变量创建的对象无法编辑，需多选后才可操作

问题现象 #

使用Vue3的ref响应式变量获取FabricJS画布，双击画布创建矩形后，新生成的对象仅能被点击选中，无法直接拖动或调整大小，必须通过框选该对象并释放鼠标后，才能正常进行编辑操作。

相关代码 #

父组件代码 #

<script lang="ts" setup>
import { fabric } from 'fabric'
import { ref } from 'vue'

const canvas = ref()
const handleCreated = (fabricCanvas) => {
  canvas.value = fabricCanvas
}

const handleClick = () => {
  if (!canvas.value) return

  const rect = new fabric.Rect({
    width: 120,
    height: 120,
    fill: 'blue',
    left: 250,
    top: 50,
  })

  canvas.value.add(rect)
  canvas.value.renderAll()
}
</script>

<template>
  <FabricCanvas
   class="w-full rounded-lg"
   @canvas-created="handleCreated"
   @mouse:dblclick="handleClick"
   />
</template>

FabricCanvas子组件代码 #

<script lang="ts" setup>
import { fabric } from 'fabric'
import { ref, onMounted } from 'vue'

const canvasReference = ref()
const emit = defineEmits(['canvas-created', 'mouse:dblclick'])

onMounted(() => {
    const canvas = new fabric.Canvas(canvasReference.value)
    emit('canvas-created', canvas)
    canvas.on('mouse:dblclick', () => {
      emit('mouse:dblclick')
    })
  }) 
</script>

<template>
  <canvas ref="canvasReference"> </canvas>
</template>

已知信息 #

• 若直接在FabricCanvas组件的onMounted钩子中创建元素，不存在此问题
• 同类问题在AlpineJS+FabricJS场景下有解决方案，但不适用于Vue3

解决方案 #

问题根源在于双击创建对象后，FabricJS的交互状态未正确关联到新对象，且默认的双击事件可能干扰了对象的选中状态。通过以下两步修复：

1. 创建对象后主动设置为活动对象 #

修改父组件的handleClick方法，添加setActiveObject将新创建的矩形设为画布的当前活动对象：

const handleClick = () => {
  if (!canvas.value) return

  const rect = new fabric.Rect({
    width: 120,
    height: 120,
    fill: 'blue',
    left: 250,
    top: 50,
  })

  canvas.value.add(rect)
  // 设置新矩形为活动对象，确保交互状态正确
  canvas.value.setActiveObject(rect)
  canvas.value.renderAll()
}

2. 阻止FabricJS双击事件的默认行为（可选） #

在子组件的双击事件处理中，添加preventDefault避免Fabric内部的默认行为与自定义逻辑冲突：

canvas.on('mouse:dblclick', (e) => {
  e.preventDefault()
  emit('mouse:dblclick')
})

完成以上修改后，双击画布创建的矩形将直接处于可编辑状态，无需额外框选操作。

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