Fabric.js 画布 —— 不可交互的画布

不可交互的画布


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

Fabric.js 画布 —— 不可交互的画布


<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' // 引入 fabricfunction 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 即可。

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!