1.1.0 • Published 5 months ago

vue-graffiti v1.1.0

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

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;
}

在线体验

http://49.232.252.227:1566

Attributes

参数说明类型默认值
cWidthcanvas 宽度number800
cHeightcanvas 高度number800
optionsTools新增工具栏Arrayimg: 工具栏展示的图片(base64);name: 名称;toolType: 类型 (img 是 5);cursor: 鼠标样式默认 default
optionsCanvascanvas 设置ObjectisBg 默认没有背景图,path:背景图的 base64
imageNameFormat保存图片的名称以及格式string默认是:测试.png

Methods

事件名称说明参数
handlePre下一步
handleNext上一步
clearCanvas清除画布
handleSaveImage下载事件
getImageData获取 image 图层list:图层数组,index:当前图层
1.1.0

5 months ago

1.0.0

5 months ago