0.1.1 • Published 4 years ago
@nangxif/palette v0.1.1
palette
一个多功能画板
目前画板拥有的功能：
1.画任意曲线；
2.两点或两点以上连成直线或折线；
3.三点或三点以上形成封闭空心图形和实心图形；
4.画圆形，可以编辑大小和位置；
5.画矩形，可以编辑大小和位置；
6.橡皮擦
7.清除画板
8.历史记录等相关系列功能；
9.生成图片
10.编辑文字功能（开发中）
一、使用方法
import palette from "@nangxif/palette";
import "@nangxif/palette/dist/css/common.css"
components: {
palette
}
<palette
:showbarOption="showbarOption"
:paletteStyle="paletteStyle"
:eraserOption="eraserOption"
@paletteImage="paletteImage"
></palette>二、参数解析
| 参数 | 用途 |
|---|---|
| :showbarOption | 编辑工具栏 |
| :paletteStyle | 编辑画板初始样式 |
| :eraserOption | 编辑橡皮擦初始样式 |
| @paletteImage | 接收生成的图片 |
（一）:showbarOption
| 键 | 类型 | 默认值 | 用途 |
|---|---|---|---|
| clearBtn | boolean | true | 是否显示清除按钮 |
| saveBtn | object | { isShow:true; imageType:'png'} | isShow控制是否显示保存图片按钮，imageType控制最后生成的图片的类型，支持png以及jpg |
| lineBtn | boolean | true | 是否显示画直线按钮 |
| hollowIrregularPolygonBtn | boolean | true | 是否显示画空心封闭图形按钮 |
| solidIrregularPolygonBtn | boolean | true | 是否显示画实心封闭图形按钮 |
| paintCircleBtn | boolean | true | 是否显示画圆按钮 |
| paintRectangleBtn | boolean | true | 是否显示画矩形按钮 |
| eraserBtn | boolean | true | 是否显示橡皮擦开关按钮 |
（二）:paletteStyle
| 键 | 类型 | 默认值 | 用途 |
|---|---|---|---|
| title | string | Nangxi's drawing board | 画板标题 |
| width | number | document.body.clientWidth - 20 | 画板总宽度 |
| height | number | document.body.clientHeight - 75 | 画板总高度 |
| backgroundColor | color | white | 画板背景颜色 |
| borderStyle | solid | 画板边框样式 | |
| borderColor | color | #fed640 | 画板边框颜色 |
| borderWidth | number | 5 | 画板边框宽度 |
| defaultColor | color | black | 全局默认颜色 |
| defaultLineWidth | number | 2 | 全局默认线条宽度 |
（三）:eraserOption
| 键 | 类型 | 默认值 | 用途 |
|---|---|---|---|
| size | number | 20 | 橡皮擦大小 |
| backgroundColor | color | black | 橡皮擦颜色 |
| isRect | boolean | false | 橡皮擦是否为矩形 |