1.1.0 • Published 5 months ago
vue-graffiti v1.1.0
vue-graffiti
介绍
基于 vue3 开发的涂鸦组件,支持图片、文字、圆形、矩形、画笔
使用方式 npm
npm i vue-graffiti -S
main.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:当前图层 |