palette

一个多功能画板

目前画板拥有的功能:

1.画任意曲线;

2.两点或两点以上连成直线或折线;

3.三点或三点以上形成封闭空心图形和实心图形;

4.画圆形,可以编辑大小和位置;

5.画矩形,可以编辑大小和位置;

6.橡皮擦

7.清除画板

8.历史记录等相关系列功能;

9.生成图片

10.编辑文字功能(开发中)

github地址

demo地址

一、使用方法

npm install @nangxif/palette -S

import palette from "@nangxif/palette";

components: {
  palette
}


<palette
  :showbarOption="showbarOption"
  :paletteStyle="paletteStyle"
  :eraserOption="eraserOption"
  @paletteImage="paletteImage"
></palette>

二、参数解析

参数用途
:showbarOption编辑工具栏
:paletteStyle编辑画板初始样式
:eraserOption编辑橡皮擦初始样式
@paletteImage接收生成的图片

(一):showbarOption

类型默认值用途
clearBtnbooleantrue是否显示清除按钮
saveBtnobject{
isShow:true;
imageType:'png'
}
isShow控制是否显示保存图片按钮,imageType控制最后生成的图片的类型,支持png以及jpg
lineBtnbooleantrue是否显示画直线按钮
hollowIrregularPolygonBtnbooleantrue是否显示画空心封闭图形按钮
solidIrregularPolygonBtnbooleantrue是否显示画实心封闭图形按钮
paintCircleBtnbooleantrue是否显示画圆按钮
paintRectangleBtnbooleantrue是否显示画矩形按钮
eraserBtnbooleantrue是否显示橡皮擦开关按钮

(二):paletteStyle

类型默认值用途
titlestringNangxi's drawing board画板标题
widthnumberdocument.body.clientWidth - 20画板总宽度
heightnumberdocument.body.clientHeight - 75画板总高度
backgroundColorcolorwhite画板背景颜色
borderStyle solid画板边框样式
borderColorcolor#fed640画板边框颜色
borderWidthnumber5画板边框宽度
defaultColorcolorblack全局默认颜色
defaultLineWidthnumber2全局默认线条宽度

(三):eraserOption

类型默认值用途
sizenumber20橡皮擦大小
backgroundColorcolorblack橡皮擦颜色
isRectbooleanfalse橡皮擦是否为矩形

三、效果预览

QQ截图20200409181351

 

 

Logo

前往低代码交流专区

更多推荐