大前端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>