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示例小程序码