不可交互的画布

画布上的元素将无法选中和操作。也可以理解为冻结了画布。

<template> 
 <canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
​
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric' // 引入 fabric
​
function init() {
 // 使用 StaticCanvas 创建一个不可操作的画布 
 const canvas = new fabric.StaticCanvas('canvas') // 这里传入的是canvas元素的id
​
 // 创建一个长方形 
 const rect = new fabric.Rect({
 top: 100, // 距离容器顶部 100px 
 left: 100, // 距离容器左侧 100px 
 width: 30, // 矩形宽度 30px 
 height: 30, // 矩形高度 30px 
 fill: 'red' // 填充 红色
 })
​
 canvas.add(rect) // 将矩形添加到 canvas 画布里
}
​
onMounted(() => {
 init()
})
</script>

创建不可交互的画布，其实只需把 new fabric.Canvas 改成 new fabric.StaticCanvas 即可。