# 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。
基础使用
<template>
<view class="container">
<view class="tui-page__bd tui-page__spacing">
<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx"
@click="basicDraw">基础使用</tui-button>
<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx"
@click="goodsPoster">商品海报</tui-button>
</view>
<tui-poster :width="560" :height="890" ref="poster" @ready="ready"></tui-poster>
</view>
</template>
<script>
//注意:绘制顺序按照数组数据先后顺序
export default {
data() {
return {
init: false,
basicPosterUrl: '',
basicPosterData: [{
type: 'rect',
style: {
left: 0,
top: 0,
width: 560,
height: 890,
backgroundColor: '#ffffff'
}
}, {
type: 'text',
text: 'ThorUI组件库',
style: {
left: 280,
top: 60,
fontSize: 32,
color: '#333333',
width: 560,
fontWeight: 'bold',
textAlign: 'center'
}
}, {
type: 'text',
text: '简约而不简单一直是ThorUI的追求。 除了组件库ThorUI还会陆续发布一些常用模板,使开发更加高效。',
style: {
left: 24,
top: 120,
fontSize: 20,
lineHeight: 32,
color: '#333333',
width: 500,
rows: 2
}
}, {
type: 'rect',
style: {
left: 30,
top: 200,
width: 120,
height: 120,
borderWidth: 1,
borderColor: '#ff7900'
}
}, {
type: 'rect',
style: {
left: 180,
top: 200,
width: 120,
height: 120,
borderRadius: 120,
backgroundColor: '#ff7900'
}
}, {
type: 'rect',
style: {
left: 320,
top: 200,
width: 120,
height: 120,
borderRadius: 20,
backgroundColor: '#ff7900'
}
}, {
type: 'image',
src: '/static/images/index/logo.png',
style: {
left: 30,
top: 360,
width: 120,
height: 120,
borderRadius: 120
}
}, {
type: 'image',
src: '/static/images/index/logo.png',
style: {
left: 180,
top: 360,
width: 120,
height: 120,
borderRadius: 20
}
}, {
type: 'line',
style: {
left: 30,
top: 600,
endLeft: 520,
endTop: 600,
color: '#ff7900',
width: 1
}
}, {
type: 'line',
style: {
left: 30,
top: 620,
endLeft: 420,
endTop: 620,
color: '#ff7900',
width: 2
}
}, {
type: 'line',
style: {
left: 30,
top: 640,
endLeft: 320,
endTop: 640,
color: '#ff7900',
width: 4
}
}, {
type: 'text',
text: '¥36.50',
style: {
left: 30,
top: 720,
fontSize: 20,
color: '#999999',
width: 200,
lineThrough: true
}
}, {
type: 'text',
text: '¥11199.80',
frontText: '¥36.50',
style: {
left: 30,
top: 720,
fontSize: 20,
color: '#999999',
width: 200,
lineThrough: true,
frontSize: 20,
spacing: 12
}
}],
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
}
}]
}
},
methods: {
ready() {
this.init = true
},
basicDraw() {
if (!this.init || !this.$refs.poster) return;
if (this.basicPosterUrl) {
uni.previewImage({
urls: [this.basicPosterUrl]
});
return
}
uni.showLoading({
title: '绘制中...'
})
this.$refs.poster.draw(this.basicPosterData, (filePath) => {
//绘制图片路径
console.log(filePath)
this.basicPosterUrl = filePath;
uni.previewImage({
urls: [filePath]
});
uni.hideLoading()
})
},
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()
})
}
}
}
</script>
<!-- 示例中使用到组件请自行引入 -->
<view class="container">
<view class="tui-page__bd tui-page__spacing">
<tui-button type="gray-primary" size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx"
bindclick="basicDraw">基础使用</tui-button>
<tui-button type="gray-primary" size="34" bold width="372rpx" height="84rpx" margin="0 auto 40rpx"
bindclick="goodsPoster">商品海报</tui-button>
</view>
<tui-poster width="{{560}}" height="{{890}}" id="poster" bindready="ready"></tui-poster>
</view>
// data 数据 及 方法
//注意:绘制顺序按照数组数据先后顺序
let poster;
Page({
data: {
init: false,
basicPosterUrl: '',
basicPosterData: [{
type: 'rect',
style: {
left: 0,
top: 0,
width: 560,
height: 890,
backgroundColor: '#ffffff'
}
}, {
type: 'text',
text: 'ThorUI组件库',
style: {
left: 280,
top: 60,
fontSize: 32,
color: '#333333',
width: 560,
fontWeight: 'bold',
textAlign: 'center'
}
}, {
type: 'text',
text: '简约而不简单一直是ThorUI的追求。 除了组件库ThorUI还会陆续发布一些常用模板,使开发更加高效。',
style: {
left: 24,
top: 120,
fontSize: 20,
lineHeight: 32,
color: '#333333',
width: 500,
rows: 2
}
}, {
type: 'rect',
style: {
left: 30,
top: 200,
width: 120,
height: 120,
borderWidth: 1,
borderColor: '#ff7900'
}
}, {
type: 'rect',
style: {
left: 180,
top: 200,
width: 120,
height: 120,
borderRadius: 120,
backgroundColor: '#ff7900'
}
}, {
type: 'rect',
style: {
left: 320,
top: 200,
width: 120,
height: 120,
borderRadius: 20,
backgroundColor: '#ff7900'
}
}, {
type: 'image',
src: '/static/images/index/logo.png',
style: {
left: 30,
top: 360,
width: 120,
height: 120,
borderRadius: 120
}
}, {
type: 'image',
src: '/static/images/index/logo.png',
style: {
left: 180,
top: 360,
width: 120,
height: 120,
borderRadius: 20
}
}, {
type: 'line',
style: {
left: 30,
top: 600,
endLeft: 520,
endTop: 600,
color: '#ff7900',
width: 1
}
}, {
type: 'line',
style: {
left: 30,
top: 620,
endLeft: 420,
endTop: 620,
color: '#ff7900',
width: 2
}
}, {
type: 'line',
style: {
left: 30,
top: 640,
endLeft: 320,
endTop: 640,
color: '#ff7900',
width: 4
}
}, {
type: 'text',
text: '¥36.50',
style: {
left: 30,
top: 720,
fontSize: 20,
color: '#999999',
width: 200,
lineThrough: true
}
}, {
type: 'text',
text: '¥11199.80',
frontText: '¥36.50',
style: {
left: 30,
top: 720,
fontSize: 20,
color: '#999999',
width: 200,
lineThrough: true,
frontSize: 20,
spacing: 12
}
}],
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
}
}]
},
onReady() {
poster = this.selectComponent('#poster')
},
ready() {
this.setData({
init: true
})
},
basicDraw() {
if (!this.data.init || !poster) return;
if (this.data.basicPosterUrl) {
wx.previewImage({
urls: [this.data.basicPosterUrl]
});
return
}
wx.showLoading({
title: '绘制中...'
})
poster.draw(this.data.basicPosterData, (filePath) => {
//绘制图片路径
console.log(filePath)
this.data.basicPosterUrl = filePath;
wx.previewImage({
urls: [filePath]
});
wx.hideLoading()
})
},
goodsPoster() {
if (!this.data.init || !poster) return;
if (this.data.goodsPosterUrl) {
wx.previewImage({
urls: [this.data.goodsPosterUrl]
});
return
}
wx.showLoading({
title: '绘制中...'
})
poster.draw(this.data.goodsPosterData, (filePath) => {
//绘制图片路径
console.log(filePath)
this.data.goodsPosterUrl = filePath;
wx.previewImage({
urls: [filePath]
});
wx.hideLoading()
})
}
})
// Make sure to add code blocks to your code group
# Slots
插槽名称 | 说明 |
---|---|
- | - |
# Props
属性名 | 类型 | 说明 | 默认值 |
---|---|---|---|
width | Number, String | 海报宽度,单位rpx | 800 |
height | Number, String | 海报高度,单位rpx | 1200 |
pixel | Number, String | 像素比 | 3 |
# Events
注:uni-app端绑定事件使用@前缀,如@ready;微信小程序原生使用bind前缀,如bindready
事件名 | 说明 | 回调参数 |
---|---|---|
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示例小程序码 |