更新记录
1.0.4(2020-06-03) 下载此版本
1.0.4 h5使用网络图片可能会显示白屏(不知具体原因,可能是跨域,使用网络图片前需要测试)
1.0.3(2020-06-03) 下载此版本
1.0.3 增加长图表单模式/兼容h5
1.0.2(2020-04-10) 下载此版本
1.0.2 完善组件,增加了图片圆角模式
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
在zwyPoster.vue的created中绘制海报 基本使用四个方法,有其他需求可以自己写或者提出来。
/*
绘制图片
调用方式:this.drawBg({
url:'',路径
sLeft:0~1 | 'center' 百分比离左边距离 1则为100vw,
sTop:0~1 百分比离顶部距离,
sWidth:0~1 百分比宽度,
sHeight:0~1 百分比高度
})
*/
/*
绘制头像
绘制头像需要添加域名白名单 downloadFile合法域名 https://wx.qlogo.cn
调用方式:this.circleImg(img, x, y, r)
img:图片路径
x:0~1 百分比离左边距离,
y:0~1 百分比离顶部距离
*/
/*
绘制单行文本
调用方式:this.drawText({
text:'文本', String || Array
sLeft:0~1 || 'center' 百分比离左边距离,
sTop:0~1 百分比离顶部距离,
fontSize:Number 文字大小,
color:'' 颜色,
bold:Boolean 粗体,
lineHeight:Number //如果是数组则设置行高
})
*/
// 绘制多行文本
this.drawPara({
para:'恭喜您获得了5元兰博基尼优惠劵!兑换码XXXX高1亮1文1字XXXXXX高2亮2文2字XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',//文本
fontSize:10,//字体大小
sLeft:.06,//百分比离左边距离
sTop:.32,//百分比李作边距离
titleHeight:16,//一行高度
sMaxWidth:.84,//一行最大宽度
redWord:['高1亮1文1字','高2亮2文2字','兰博基尼优惠劵'],//关键字
color:'#5A390F',//正常颜色
redColor:'#DD524D',//高亮颜色
bold:false //是否加粗
})