template-editor-uniapp

图片编辑器

介绍

用于图片添加素材功能

API

TemplateEditor Props

属性名	类型	可选值	默认值	说明
width	Number	-	父容器宽度	画布宽
height	Number	-	500	画布高
list	Array	-	[]	素材编辑属性集合
icon	Object	-	{focusColor: "#EC7E59",color: "#FFE7DF",fontColor: "#0C193D"}	操作图标颜色配置
boundaryConfig	Object	-	{mode: "hide",size: [1000, 1000],position: [20, 20],}	区域配置，素材会在当前区域更改
scaleRange	Array	-	[0.1, 5]	限制缩放范围
editorClassName	String	-	''	自定义编辑器类名

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时触发

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	更换背景图
getCurrentData	Function	-	获取当前操作素材组项
getActiveData	Function	-	获取当前可操作素材项
drawerCanvas	Function	id	canvas转成图片
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	family: 字体 ; index: 可选，素材索引，不填写时默认当前可操作素材索引	更改字体
textStyles.bold	Function	index: 可选，素材索引，不填写时默认当前可操作素材索引	更改字重
textStyles.italic	Function	index: 可选，素材索引，不填写时默认当前可操作素材索引	设置斜体
textStyles.underLine	Function	index: 可选，素材索引，不填写时默认当前可操作素材索引	设置下划线
textStyles.lineThrough	Function	index: 可选，素材索引，不填写时默认当前可操作素材索引	设置删除线
textStyles.vertical	Function	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: 可选，素材索引，不填写时默认当前可操作素材索引	设置文字不透明度