# 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示例
    ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
    Last Updated: 7/21/2023, 2:12:46 PM