1.1.0 • Published 2 years ago
vue-graffiti v1.1.0
vue-graffiti
介绍
基于 vue3 开发的涂鸦组件,支持图片、文字、圆形、矩形、画笔
使用方式 npm
npm i vue-graffiti -Smain.js
import { createApp } from "vue";
import App from "./App.vue";
import vueGraffiti from "vue-graffiti";
import "vue-graffiti/vueGraffiti.css";
createApp(App).use(vueGraffiti).mount("#app");.d.ts(没有使用 ts 可以省略)
declare module "vue-graffiti" {
const content: any;
export default content;
}在线体验
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| cWidth | canvas 宽度 | number | 800 |
| cHeight | canvas 高度 | number | 800 |
| optionsTools | 新增工具栏 | Array | img: 工具栏展示的图片(base64);name: 名称;toolType: 类型 (img 是 5);cursor: 鼠标样式默认 default |
| optionsCanvas | canvas 设置 | Object | isBg 默认没有背景图,path:背景图的 base64 |
| imageNameFormat | 保存图片的名称以及格式 | string | 默认是:测试.png |
Methods
| 事件名称 | 说明 | 参数 |
|---|---|---|
| handlePre | 下一步 | |
| handleNext | 上一步 | |
| clearCanvas | 清除画布 | |
| handleSaveImage | 下载事件 | |
| getImageData | 获取 image 图层 | list:图层数组,index:当前图层 |