Vue 3/2 的 HTML5 Canvas 绘图组件 - vue-drawing-canvas

Vue 3/2 的 HTML5 Canvas 绘图组件 - vue-drawing-canvas
插件名称 razztyfication
发布时间 2021年12月23日
插件作者 vue-drawing-canvas

一个 Vue 3/2 组件,允许使用 JavaScript 在 HTML5 画布上绘图。支持文字/图片水印。

安装和下载:

# VUE 3
$ npm i vue-drawing-canvas

# VUE 2
$ npm i vue-drawing-canvas @vue/composition-api

使用

1. 导入并注册绘图画布组件。

import VueDrawingCanvas from "vue-drawing-canvas";
export default {
  components: {
    VueDrawingCanvas,
  },
  // ...
}

2. 将组件添加到模板中。

<template>
  <vue-drawing-canvas
    ref="VueCanvasDrawing"
  />
</template>

3. 可用的组件道具。

strokeType: {
  type: String,
  validator: (value: string) => {
    return ['dash', 'square', 'circle', 'triangle', 'half_triangle'].indexOf(value) !== -1
  },
  default: () => 'dash'
},
fillShape: {
  type: Boolean,
  default: () => false
},
width: {
  type: [String, Number],
  default: () => 600
},
height: {
  type: [String, Number],
  default: () => 400
},
image: {
  type: String,
  default: () => ''
},
eraser: {
  type: Boolean,
  default: () => false
},
color: {
  type: String,
  default: () => '#000000'
},
lineWidth: {
  type: Number,
  default: () => 5
},
lock: {
  type: Boolean,
  default: () => false
},
styles: {
  type: [Array, String, Object],
},
classes: {
  type: [Array, String, Object],
},
backgroundColor: {
  type: String,
  default: () => '#FFFFFF'
},
backgroundImage: {
  type: String,
  default: () => null
},saveAs: {
  type: String,
  validator: (value: string) => {
    return ['jpeg', 'png'].indexOf(value) !== -1
  },
  default: () => 'png'
},
canvasId: {
  type: String,
  default: () => 'VueDrawingCanvas'
}
initialImage: {
  type: Array,
  default: () => []
}

4. API 方法。

// 从当前画布获取 x 轴和 y 轴坐标
getCoordinates(event)

// 获取所有笔画
getAllStrokes()

// 重启
reset()

// 撤销
undo()  

// 重做
redo()

// 重绘
redraw()

// 检查是否为空
isEmpty()