一个仿《图怪兽》的简易版图片编辑器
js
[
{
label: '庞门正道标题体',
value: 'pmzdbtt'
},
{
label: '文泉驿等宽微米黑',
value: 'wqydkwmh'
},
{
label: '思源宋体SC Regular',
value: 'systSCRegular'
},
{
label: '思源宋体SC Light',
value: 'systSCLight'
},
{
label: '思源宋体SC ExtraLight',
value: 'systSCExtraLight'
},
{
label: '思源宋体SC Heavy',
value: 'systSCHeavy'
},
{
label: '思源黑体 Regular',
value: 'syhtRegular'
},
{
label: '思源黑体 Light',
value: 'syhtLight'
},
{
label: '思源黑体 Heavy',
value: 'syhtHeavy'
}
]
`
$3
`js
liveCode = [{
name: '活码的名称',
src: '活码的地址'
}]
`
$3
该函数应该返回图片的服务器地址，然后会自动插入到编辑器中
`js
uploadSuccess(result) { // result 为 uploadAction 设置的上传接口返回的结果数据
return result.data.src // 返回图片地址
}
`
---
Methods
|方法名|说明|参数|返回值|
|-|-|-|-|
|setData|设置场景数据|{Object/String} data [, {Array} extraImage]|-|
|getData|返回场景信息，不包含场景转换后的 base64 值|String 返回的数据类型，默认 JSON 对象
可设置 string 返回 JSON 字符串|Object|
$3
data: 场景数据，可设置JSON字符串或JSON对象
extraImage: 额外的图片信息，数据结构:
`js
[{
value, // 图片1地址
width, // 图片1宽度
height, // 图片1高度
opacity, // 透明度 默认1
top, // 上边距
right, // 右边距
bottom, // 下边距
left // 左边距
}, {
value, // 图片2地址
width, // 图片2宽度
height, // 图片2高度
opacity, // 透明度 默认1
top, // 上边距
right, // 右边距
bottom, // 下边距
left // 左边距
}]
`
---
Events
|事件名|说明|参数|
|-|-|-|
|save|点击保存按钮后的事件|{base64: '', sceneData: ''}|
$3
`js
{
base64: '', // 场景转换成图片后的 base64 值
sceneData: '' // 场景信息转换后的 JSON 串，对于后台来说直接传给后台保存即可
}
``