# fabric-editor-demo

**Repository Path**: lafen/fabric-editor-demo

## Basic Information

- **Project Name**: fabric-editor-demo
- **Description**: 基于fabric实现的图片画板编辑demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-08-17
- **Last Updated**: 2025-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Fabric, Canvas

## README

# fabric-editor-demo

基于 `fabric` 实现的图片画板编辑器


## Project Setup

```sh
pnpm install
pnpm dev
```


## 🅰️ttention❗

`vue3` 项目中，响应式对象会将 `add` 的元素转成 `Proxy` ，会导致元素控件无法响应，即无法缩放和删除等操作，所以需要使用 `vue3` 提供的 `markRaw` 将元素标记 `add` 的元素为原生对象，代码如下

```js
// 创建一个文本元素
const shape = new fabric.IText('注意此坑', config)
// 标记为原生对象再 add 😂⚠️
const shapeRaw = markRaw(shape)
canvasRef.value.add(shapeRaw)
canvasRef.value.setActiveObject(shapeRaw)
```


⚠️ 注意：此外画布实例也得标记为原生对象，否则在使用 `loadFromJSON` 加载画布 `json` 来回显时会出现同样的缩放失效问题

```js
// 画布实例标记为原生对象
const canvasRef = ref(null)
canvasRef.value = markRaw(new fabric.Canvas('c'))
```

## Finally

实际上 `fabric` 更加推荐将画布实例赋值为原生对象而非响应式对象，只不过这里一开始这样定义成了响应式对象，要改动的地方太多，所以直接将其标记为原生对象算了，这样在 `hooks` 中传参也不至于丢失了画布实例的引用，在此记录一下这个坑🕳️