大前端05-用vue轻量级第三方组件库快速创建个画板，可以支持画板、直线、圆形等输入，可以撤回，改变颜色

第三方组件介绍：

1. vue-whiteboard

vue-whiteboard 是一个基于Vue.js的轻量级画板组件库。

GitHub仓库: https://github.com/craynic/vue-whiteboard

优势：

• 轻量级
• 支持基本绘图功能，如画线、圆等
• 支持橡皮擦功能
• 支持清空画布

劣势：

• 功能较少，可能不满足复杂场景需求
• 文档和示例有限

集成代码示例：

# 安装依赖
npm install vue-whiteboard

<template><div><white-board ref="whiteBoard" :width="500" :height="500" /></div>
</template><script>
import { WhiteBoard } from 'vue-whiteboard';export default {components: {WhiteBoard},mounted() {this.$refs.whiteBoard.setBrush({color: 'red',size: 10});}
};
</script>

1. fabric.js + vue-fabric-wrapper

Fabric.js 是一个功能丰富的 JavaScript 库，用于在HTML5 <canvas> 元素上进行交互式对象模型操作。vue-fabric-wrapper 是一个将 Fabric.js 与 Vue.js 结合使用的组件。

Fabric.js 官网: http://fabricjs.com/ vue-fabric-wrapper GitHub: https://github.com/vue-comps/vue-fabric-wrapper

优势：

• 功能丰富，包括绘制形状、图片、文本等
• 支持事件处理、选择、拖放和修改对象
• 可以撤销和重做操作
• 可以更改颜色、边框等属性

劣势：

• 相对于其他轻量级库，体积稍大
• 需要熟悉 Fabric.js 的API

集成代码示例：

# 安装依赖
npm install fabric vue-fabric-wrapper

<template><div><fabric-canvas ref="canvas" :width="500" :height="500" /></div>
</template><script>
import { fabric } from 'fabric';
import { FabricCanvas } from 'vue-fabric-wrapper';export default {components: {FabricCanvas},mounted() {const canvas = this.$refs.canvas.getFabricObject();const circle = new fabric.Circle({radius: 30,fill: 'red',left: 50,top: 50});canvas.add(circle);}
};
</script>