# tui-poster 绘制海报

介绍

配置数据绘制海报。

注意

生成海报如果使用网络图片,必须可以下载到本地,不要直接使用案例图片或其他任意第三方图片,小程序端图片对应的域名需要在小程序后台配置(效果以真机测试为准)。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiPoster from "@/components/thorui/tui-poster/tui-poster"
export default {
	components:{
		tuiPoster
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中

# 微信小程序引入(可在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示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码