leafer-image-editor/README.md

image editor

# 图片编辑器

## 介绍
用于图片添加素材功能

## API
### TemplateEditor Props
|属性名|类型|可选值|默认值|说明
|-|-|-|-|-|
|width|Number\|String|-|父容器宽度|画布宽|
|height|Number\|String|-|500|画布高|
|bgColor|String|-|-|画布背景色|
|list|Array|-|[]|素材编辑属性集合|
|defaultCurrentIndex|Number|-|0|默认显示画布索引,非必填默认0|
|limitCount|Number|-|0|显示画布添加素材个数， 为0时表示不限制个数|
|icon|Object|-|{focusColor: "#EC7E59",color: "#FFE7DF",fontColor: "#0C193D"}|操作图标颜色配置|
|boundaryConfig|Object|-|{mode: "hide",size: [容器宽, 容器高],position: [20, 20],}|区域配置，素材会在当前区域更改|
|scaleRange|Array|-|[0.1, 5]|限制缩放范围|
|editorClassName|String|-|''|自定义编辑器类名
|canImageEdit|Boolean|-|true|是否显示图片素材编辑
|canTextEdit|String|-|true|是否显示文本素材编辑

### scaleRange Options
|索引|类型|默认值|说明
|-|-|-|-|
|0|Number|0.1|最小缩放范围，不可小于0
|1|Number|5|最大缩放范围|

### boundaryConfig Options
|属性|类型|可选值|默认值|说明
|-|-|-|-|-|
|mode|String|hide \| restrict|hide|hide 超出隐藏； restrict 超出限制；
|size|Array|-|当前画布宽高|可操作区域宽高(px)
|position|Array|-|[0, 0]| 起算坐标点[x,y]

### TemplateEditor Events
|事件|类型|参数|说明|
|-|-|-|-|
|@change| Function |参数1: current;参数2: list;参数3: index|素材change时触发
|@materialEdit|Function|参数1: record;参数2: index;|编辑素材左下角操作icon时触发
|@exceedsLimit|Function|-|添加素材超出限制
|@changeCurrent|Function|id|切换画布
|@doubleClickText|Function|参数1: record;参数2: index;|双击文本素材

### change params
|参数|类型|默认值|说明
|-|-|-|-|
|current|Number \| String |-|当前操作素材组项id
|list|Array|-|素材编辑属性集合
|index|Number|-|当前操作素材索引

### materialEdit params
|参数|类型|默认值|说明
|-|-|-|-|
|record|Object|-|当前操作素材项
|index|Array|-|当前操作素材索引

## TemplateEditor Exposed Properties 
|属性名|类型|默认值|说明
|-|-|-|-|
|current|Number \| String|-|当前操作素材组项id
|activeData|Object|-|当前可操作素材项


## TemplateEditor Exposed Methods 
|方法名|类型|参数|说明
|-|-|-|-| 
|toggleCurrent|Function|value: 素材组项Id|改变操作素材组项
|getCurrentId|Function|-|获取当前操作素材组ID
|toggleBgImage|Function|url|更换背景图
|addItem|Function|data|添加面
|deleteItem|Function|id|删除面
|clear|Function|-|清空所有面
|setMaterials|Function|id(设置的面id), materials(设置素材组数组)|设置一面素材组
|resetMaterials|Function|id(设置的面id)|清空一面素材组
|getCurrentData|Function|-|获取当前操作素材组项
|getActiveData|Function|-|获取当前可操作素材项
|reset|Function|-|重置
|drawerCanvas|Function|id|canvas转成图片
|exportFrame|Function|number: 导出加工区宽,id: 当前面id|导出加工区
|addImage|Function|data: 素材配置项|添加图片素材
|addText|Function|data: 素材配置项|添加文本素材
|replaceText|Function|text: 替换文本; index: 可选，素材索引，不填写时默认当前可操作素材索引|替换文本素材
|copy|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|复制素材
|top|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|置顶素材
|bottom|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|置底素材
|moveUp|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|上移素材
|moveDown|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|下移素材
|horizontalCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|素材水平居中
|verticalCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|素材垂直居中
|rotate|Function|deg: 旋转角度;index: 可选，素材索引，不填写时默认当前可操作素材索引|旋转素材
|flip|Function|type: x(水平翻转)\|y(垂直翻转); index: 可选，素材索引，不填写时默认当前可操作素材索引|翻转素材
|opacity|Function|opacity: 0-100 ; index: 可选，素材索引，不填写时默认当前可操作素材索引|不透明度
|textStyles.family|Function|{fontFamily: 字体, fontFamilyUrl: '在线字体链接'}; reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|更改字体
|textStyles.bold|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|更改字重
|textStyles.italic|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置斜体
|textStyles.underLine|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置下划线
|textStyles.lineThrough|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置删除线
|textStyles.vertical|Function|reset: 样式重置 boolean 默认false; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字竖排
|textStyles.alignLeft|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居左
|textStyles.alignCenter|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居中
|textStyles.alignRight|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字居右
|textStyles.justify|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字两端对齐
|textStyles.distributed|Function|index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字分散对齐
|textStyles.fontSize|Function|size:字体大小 ;index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字字体大小
|textStyles.color|Function|color:颜色 ;index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字颜色
|textStyles.opacity|Function|opacity: 0-100; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字不透明度
|textStyles.lineHeight|Function|lineHeight: 1-5; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字行高
|textStyles.letterSpacing|Function|letterSpacing: 1-100; index: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字间距

## list属性定义

```js
[{
		id: 1,// 唯一键值
		imageUrl: "https://upfile.aiprint365.com/20250328-114806.jpg",// 底图
		width: 0,// 画布宽，默认为0，根据此值计算配置信息比例
		height: 0,// 画布高，默认为0，根据此值计算配置信息比例
		name: "前身",// 画布名
		materials: [// 素材组
			{
				id: 1,// 唯一键值
				zIndex: 1,// 层级
				x: 100,// 当前画布坐标X
				y: 100,// 当前画布坐标X
				width: 140,// 素材宽
				height: 140,// 素材高
				angle: 0, // 旋转角度
				scale: 1, // 缩放比例
				materialType: 1,// 素材类型 1 图片素材 2 文本素材
				opacity: 1,// 不透明度
				materialUrl: "https://i.postimg.cc/HsM6T9yj/f7e2fca50e1585f98e6d0a4518602b8d-png-3x.png",// 素材链接地址 当素材类型为图片素材时，即为图片素材地址，素材类型为文本素材时，生成后的图片数据中为文本生成的base64图片
				color: '#000',// 文本属性 颜色
				fontSize: 20,// 文本属性 字号
				fontFamily: undefined,// 文本属性 字体
				fontFamilyUrl: undefined,// 文本属性 艺术字体链接
				fontWeight: 'normal',// 文本属性 字重
				fontStyle: 'normal',// 文本属性 字体风格
				textDecoration: 'inherit',// 文本属性 文本装饰效果
				writingMode: 'inherit',// 文本属性 文本排布
				textOrientation: 'inherit',// 文本属性 字符方向
				textAlign: 'left',// 文本属性 对齐方式
				textAlignLast: 'inherit',// 文本属性 最后一行对齐方式
				content: "",// 文本属性 文本内容
				letterSpacing: 0,// 文本属性 文本字符间距 
				lineHeight: 1.5,// 文本属性 文本行高
			}
		]
	},
]
```

## Installation

```bash
npm install leafer-image-editor
```

### Useage

```js
import ImageEditor from "leafer-image-editor";
import "leafer-image-editor/dist/leafer-image-editor.css";
```