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