16 KiB
16 KiB
Painter 画板
可根据自身需求配置生成海报的画板
平台兼容
| H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ 小程序 | App |
|---|---|---|---|---|---|---|
| √ | √ | 未测 | 未测 | √ | 未测 | √ |
1、增加支持2d
不建议开启，因为PC端小程序并不支持。
2、增加支持渐变色
{
css: {
// 一定要写百分比
background: 'linear-gradient(135deg, #ff971b 0%, #ff5000 100%)' ,
}
}
3、删除drawAll等方法，改用成render
<l-painter ref="painter" ></l-painter>
// 支持通过调用render传入参数
const painter = this.$refs.painter
painter.render({..参数..})
// 支持通过调用canvasToTempFilePath方法传入参数 调取生成图片
painter.canvasToTempFilePath({..参数..}).then(fun)
代码演示
基本用法
定一个画板对象，包含width、height、background，views为画板里的元素集，它是一个数组对象。
元素类型目前有view、text、image
css 对象里的位置都是相对于画板的绝对定位，支持rpx、px
<l-painter :board="base"></l-painter>
export default {
data() {
return {
base {
width: '686rpx',
height: '130rpx',
views: [
{
type: 'view',
css: {
left: '0rpx',
top: '0rpx',
background: '#07c160',
width: '120rpx',
height: '120rpx'
}
},
{
type: 'view',
css: {
left: '180rpx',
top: '18rpx',
background: '#1989fa',
width: '80rpx',
height: '80rpx',
rotate: 50
}
}
]
};
}
}
}
圆角
为可元素定一个圆角radius,支持rpx、px、%
<l-painter :board="base"></l-painter>
export default {
data() {
return {
base: {
width: '686rpx',
height: '130rpx',
views: [
{
type: 'view',
css: {
left: '0rpx',
top: '0rpx',
background: '#07c160',
width: '120rpx',
height: '120rpx',
radius: '16rpx 30rpx 10rpx 80rpx'
}
},
{
type: 'view',
css: {
left: '150rpx',
top: '0rpx',
background: '#1989fa',
width: '120rpx',
height: '120rpx',
radius: '16rpx 60rpx'
}
},
{
type: 'view',
css: {
left: '300rpx',
top: '0rpx',
background: '#ff976a',
width: '120rpx',
height: '120rpx',
radius: '50%'
}
}
]
};
}
}
}
描边投影
为可元素定一个描边border和投影shadow,支持rpx、px
<l-painter :board="base"></l-painter>
export default {
data() {
return {
base: {
width: '686rpx',
height: '130rpx',
views: [
{
type: 'view',
css: {
left: '10rpx',
top: '10rpx',
background: 'rgba(7,193,96,.1)',
width: '120rpx',
height: '120rpx',
radius: '50%',
border: '2rpx dashed rgb(7,193,96)'
}
},
{
type: 'view',
css: {
left: '150rpx',
top: '10rpx',
background: 'rgba(25,137,250,.4)',
width: '120rpx',
height: '120rpx',
radius: '50%',
shadow: '0 5rpx 10rpx rgba(25,137,250,.8)'
}
},
{
type: 'view',
css: {
left: '300rpx',
top: '10rpx',
background: 'rgba(255, 151, 106, .1)',
width: '120rpx',
height: '120rpx',
radius: '50%',
border: '2rpx solid #ff976a'
}
}
]
};
}
}
}
图片
元素类型为image时，需要一个图片地址url,图片地址支持相对路径和网络地址
::: warning 温馨提示
当为网络地址时，
H5：需要解决跨域问题
小程序：需要配置 downloadFile 域名
建议使用 base64 图片
:::
<l-painter :board="base"></l-painter>
export default {
data() {
return {
base: {
width: '686rpx',
height: '130rpx',
views: [
{
type: 'image',
url: '../../static/avatar-1.jpeg',
css: {
left: '0rpx',
top: '0rpx',
width: '120rpx',
height: '120rpx'
}
},
{
type: 'image',
url: '../../static/avatar-2.jpg',
css: {
left: '150rpx',
top: '0rpx',
width: '120rpx',
height: '120rpx',
radius: '16rpx'
}
},
{
type: 'image',
url:
'../../static/avatar-3.jpeg',
css: {
left: '300rpx',
top: '0rpx',
background: '#ff976a',
width: '120rpx',
height: '120rpx',
radius: '50%'
}
}
]
};
}
}
}
文字
元素类型text时，内容写在text里，支持\n换行符，css 的属性有字体大小fontSize、行高lineHeight、对齐textAlign、修饰textDecoration、粗细fontWeight、 宽度width、最大行数maxLines。
设置了最大行数和宽度时，当文字内容超过会显示省略号。
<l-painter :board="base"></l-painter>
export default {
data() {
return {
base: {
width: '686rpx',
height: '500rpx',
views: [
{
type: 'text',
text: '左对齐,下划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
css: {
left: '0rpx',
top: '10rpx',
fontSize: '28rpx',
lineHeight: '36rpx',
textDecoration: 'underline'
}
},
{
type: 'text',
text: '居中,上划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
css: {
left: '0rpx',
top: '150rpx',
fontSize: '28rpx',
lineHeight: '36rpx',
textAlign: 'center',
textDecoration: 'overline'
}
},
{
type: 'text',
text: '右对齐,中划线\n无风才到地，有风还满空\n缘渠偏似雪，莫近鬓毛生',
css: {
left: '0rpx',
top: '290rpx',
fontSize: '28rpx',
lineHeight: '36rpx',
textAlign: 'right',
textDecoration: 'line-through',
}
},
{
type: 'text',
text: '省略号\n明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。',
css: {
left: '0rpx',
top: '420rpx',
fontSize: '28rpx',
maxLines: 2,
width: '686rpx',
lineHeight: '36rpx'
}
}
]
};
}
}
}
提供一份海报样式案例
是否生成图片：isRenderImage、自定样式：custom-style,把 canvas 移到看不到的地方、生成图片成功:success,返回一个图片临时地址。
<l-painter
v-if="isShowPainter"
isRenderImage
custom-style="position: fixed; left: 200%;"
:board="base"
@success="path = $event"
></l-painter>
export default {
data() {
return {
base: {
width: '750rpx',
height: '1114rpx',
background: '#F6F7FB',
views: [
{
type: 'view',
css: {
left: '40rpx',
top: '144rpx',
background: '#fff',
radius: '16rpx',
width: '670rpx',
height: '930rpx',
shadow: '0 20rpx 48rpx rgba(0,0,0,.05)'
}
},
{
type: 'image',
url: '../../static/avatar-2.jpg',
mode: 'widthFix',
css: {
left: '40rpx',
top: '40rpx',
width: '84rpx',
height: '84rpx',
radius: '50%',
color: '#999'
}
},
{
type: 'text',
text: '隔壁老王',
css: {
color: '#333',
left: '144rpx',
top: '40rpx',
fontSize: '32rpx',
fontWeight: 'bold'
}
},
{
type: 'text',
text: '为您挑选了一个好物',
css: {
color: '#666',
left: '144rpx',
top: '90rpx',
fontSize: '24rpx'
}
},
{
type: 'image',
url: '../../static/goods.jpg',
mode: 'widthFix',
css: {
left: '72rpx',
top: '176rpx',
width: '606rpx',
height: '606rpx',
radius: '12rpx'
}
},
{
type: 'text',
text: '￥39.90',
css: {
color: '#FF0000',
left: '66rpx',
top: '812rpx',
fontSize: '56rpx',
fontWeight: 'bold'
}
},
{
type: 'text',
text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
css: {
maxLines: 2,
width: '396rpx',
color: '#333',
left: '72rpx',
top: '948rpx',
fontSize: '36rpx',
lineHeight: '50rpx'
}
},
{
type: 'image',
url: '../../static/qr.png',
mode: 'widthFix',
css: {
left: '500rpx',
top: '864rpx',
width: '178rpx',
height: '178rpx'
}
}
]
};
}
},
methods: {
saveImage() {
this.isShowPopup = false
uni.saveImageToPhotosAlbum({
filePath: this.path,
success(res) {
uni.showToast({
title: '已保存到相册',
icon: 'success',
duration: 2000
})
}
})
},
}
}
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| board | 画板对象 | object | 参数请向下看 |
| customStyle | 自定义样式 | string | |
| isRenderImage | 是否生成图片 | boolean | false |
Board
| 参数 | 说明 | 类型 |
|---|---|---|
| width | 画板的宽度 | string |
| height | 画板的高度 | string |
| background | 画板的背景色 | string |
| views | 画板的元素集，请向下看各元素的参数 | object |
元素 View
| 参数 | 说明 |
|---|---|
| type | 元素类型view |
| css | 元素的样式，top、left、width、height、background、radius、border、shadow 、rotate |
元素 text
| 参数 | 说明 |
|---|---|
| type | 元素类型text |
| text | 文本内容 |
| css | 元素的样式，top、left、fontSize、fontWeight、fontFamily、width、lineHeight、color、textDecoration、textAlign：center, left, right、最大行数：maxLines |
元素 image
| 参数 | 说明 |
|---|---|
| type | 元素类型image |
| url | 图片地址 |
| css | 元素的样式，top、left、width、height、radius、border、shadow |
事件 Events
| 事件名 | 说明 | 回调 |
|---|---|---|
| success | 生成图片成功 | $event |
| fail | 生成图片失败 | {error: error} |