# tui-poster 绘制海报
介绍
配置数据绘制海报。
注意
生成海报如果使用网络图片,必须可以下载到本地,不要直接使用案例图片或其他任意第三方图片,小程序端图片对应的域名需要在小程序后台配置(效果以真机测试为准)。
# 引入
# uni-app引入
第一种,手动引入(可全局引入)
import tuiPoster from "@/components/thorui/tui-poster/tui-poster.vue"
export default {
components:{
tuiPoster
}
}
第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | App-Nvue |
---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | 升级中 |
# 微信小程序引入(可在app.json中全局引入)
{
"usingComponents": {
"tui-poster": "/components/thorui/tui-poster/tui-poster"
}
}
# 代码演示
部分功能演示,具体可参考示例程序以及文档API。
基础使用
<!--uni-app-->
<tui-poster :width="560" :height="890" ref="poster" @ready="ready"></tui-poster>
<!--微信小程序-->
<tui-poster width="{{560}}" height="{{890}}" id="poster" bindready="ready"></tui-poster>
//data数据
init: false,
goodsPosterUrl:'',
goodsPosterData: [{
type: 'rect',
style: {
left: 0,
top: 0,
width: 560,
height: 890,
backgroundColor: '#ffffff'
}
}, {
type: 'image',
src: 'https://thorui.cn/extend/common/img_book.jpg',
imgType: 2,
style: {
left: 30,
top: 30,
width: 500,
height: 500
}
}, {
type: 'text',
text: '一个人的修养,看失意时的善良 陶瓷兔子 北京联合出版有限公司',
style: {
left: 30,
top: 580,
fontSize: 28,
color: '#343434',
width: 468,
rows: 2,
lineHeight: 36
}
}, {
type: 'text',
text: '¥36.50',
style: {
left: 30,
top: 680,
fontSize: 36,
color: '#EB0909',
width: 180
}
}, {
type: 'text',
text: '¥99.80',
frontText: '¥36.50',
style: {
left: 30,
top: 680,
fontSize: 20,
color: '#999999',
width: 200,
lineThrough: true,
frontSize: 36,
spacing: 12
}
}, {
type: 'text',
text: 'ThorUI示例小程序',
style: {
left: 30,
top: 780,
fontSize: 32,
color: '#333333'
}
}, {
type: 'text',
text: '长按识别·立即体验',
style: {
left: 30,
top: 835,
fontSize: 24,
color: '#333333'
}
}, {
type: 'image',
src: 'https://thorui.cn/extend/share/applets.png',
imgType: 2,
style: {
left: 384,
top: 735,
width: 130,
height: 130
}
}]
//事件方法
//uni-app
ready() {
//组件初始化完成
this.init = true
},
//调用方法绘制海报
goodsPoster() {
if (!this.init || !this.$refs.poster) return;
if (this.goodsPosterUrl) {
uni.previewImage({
urls: [this.goodsPosterUrl]
});
return
}
uni.showLoading({
title: '绘制中...'
})
this.$refs.poster.draw(this.goodsPosterData, (filePath) => {
//绘制图片路径
console.log(filePath)
this.goodsPosterUrl = filePath;
uni.previewImage({
urls: [filePath]
});
uni.hideLoading()
})
}
//微信小程序
ready() {
//组件初始化完成
this.setData({
init: true
})
},
//调用方法绘制海报
goodsPoster() {
if (!this.data.init || !this.selectComponent('#poster')) return;
if (this.data.goodsPosterUrl) {
wx.previewImage({
urls: [this.data.goodsPosterUrl]
});
return
}
wx.showLoading({
title: '绘制中...'
})
this.selectComponent('#poster').draw(this.data.goodsPosterData, (filePath) => {
//绘制图片路径
console.log(filePath)
this.data.goodsPosterUrl = filePath;
wx.previewImage({
urls: [filePath]
});
wx.hideLoading()
})
}
# Slots
名称 | 说明 |
---|---|
- | - |
# Props
参数 | 类型 | 说明 | 默认值 |
---|---|---|---|
width | Number, String | 海报宽度,单位rpx | 800 |
height | Number, String | 海报高度,单位rpx | 1200 |
pixel | Number, String | 像素比 | 3 |
# Events
事件名 | 说明 | 回调参数 |
---|---|---|
ready | 组件初始化完成时触发 | - |
# Methods
注意:绘制顺序按照数组数据先后顺序
事件名 | 说明 | 传入参数 |
---|---|---|
draw | 绘制海报 | data, callback |
save | 保存海报图片到本地相册 | file:生成海报callback回调返回路径或base64 |
//绘制海报data数及属性说明
//注意:绘制顺序按照数组数据先后顺序
[{
//绘制类型:text(文本)、image(图片)、rect(矩形),line(线条)
type:'image',
//文本内容,type=text时使用
text:'',
//同一行时,text前面的文本内容(没有则不传值),type=text时使用
frontText:'',
//图片地址,type=image时使用
src:'',
//图片类型:1-本地图片(需要平台支持);2-网络图片(必须可下载,小程序端图片对应的域名需要在小程序后台配置); 3- base64 图片(仅App,微信小程序,H5支持)
//注意:type=image时,请务必传入正确的imgType值,默认值为1
imgType:2,
//样式,不同类型对应style略有差异,见下方详细说明
style:{
...
}
}]
//style详细说明
//1.type=text 时
let {
//文本在画布中left值,单位rpx
left,
//文本在画布中top值,单位rpx
top,
//字体大小
fontSize,
//字体颜色
color,
//文字的水平对齐
baseLine = 'normal',
//文字的对齐方式
textAlign = 'left',
//字体大小,单位rpx
frontSize,
//当前文本内容与前面文本间距,单位rpx
spacing,
//画笔透明度
opacity = 1,
//中划线
lineThrough = false,
//绘制的内容最大宽度
width = 600,
//绘制的内容最多展示行数
rows = 1,
//文本行高
lineHeight = 0,
//文本的粗细
fontWeight = 'normal',
//字体的风格
fontStyle = 'normal',
//文本字体
fontFamily = "sans-serif"
} = styles
//2.type=image 时
let {
//图片在画布中left值,单位rpx
left,
//图片在画布中top值,单位rpx
top,
//图片宽度,单位rpx
width,
//图片高度,单位rpx
height,
//图片圆角值,单位rpx
borderRadius = 0,
//图片边框宽度,单位rpx
borderWidth = 0,
//图片边框颜色
borderColor
} = styles;
//3.type=rect 时
let {
//矩形宽度,单位rpx
width,
//矩形高度,单位rpx
height,
//矩形在画布中left值,单位rpx
left,
//矩形在画布中top值,单位rpx
top,
//矩形边框宽度,单位rpx
borderWidth,
//矩形背景色
backgroundColor,
//矩形渐变色
gradientColor,
//矩形背景色渐变类型:1-从上到下,2-从左到右
gradientType = 1,
//矩形边框颜色
borderColor,
//矩形圆角值,单位rpx
borderRadius = 0,
//画笔透明度
opacity = 1,
//矩形阴影,Object:
// {
// offsetX:阴影相对于形状在水平方向的偏移,
// offsetY:阴影相对于形状在竖直方向的偏移,
// blur:阴影的模糊级别,数值越大越模糊 0~100,
// color:阴影的颜色
// }
shadow
} = styles;
//4.type=line 时
let {
//起始位置left值,单位rpx
left,
//起始位置top值,单位rpx
top,
//结束位置left值,单位rpx
endLeft,
//结束位置top值,单位rpx
endTop,
//线条颜色
color,
//线条宽度,单位rpx
width = 1
} = styles;
//callback
回调函数,绘制完成后返回海报图片地址
# 预览
请以移动端效果为准,touch事件目前尚未在PC端做兼容。
# 线上程序扫码预览
![]() | ![]() | ![]() |
---|---|---|
ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |