图片编辑器

介绍

用于图片添加素材功能

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: 可选，素材索引，不填写时默认当前可操作素材索引|设置文字不透明度