# gg-draw-posters 绘制海报
gg-draw-posters
可以把图片文字等元素合并到一起
# 使用方法
在 script
中引入组件
import ggDrawPosters from "@/components/gg-draw-posters/gg-draw-posters.vue"
export default {
components: {ggDrawPosters}
}
1
2
3
4
2
3
4
在 template
中使用
<view>
<posters-layer :postersData="postersData" @success="onSuccess" @error="onError" />
</view>
1
2
3
2
3
export default {
data() {
return {
postersData: {
clear: true,
width: 660,
height: 850,
background: '#ffffff',
views: [
{
type: 'image',
width: 660,
height: 660,
top: 0,
left: 0,
// 可以使用网络和本地图片
url: '/static/images/test/1.jpg'
},
{
type: 'text',
width: 400,
height: 50,
left: 20,
top: 680,
fontSize: 30,
lineHeight: 40,
bolder: true,
breakWord: true,
content: ' Apple/苹果 iPhone XR 移动联通电信全网通版 苹果xr iphonexr 苹果xr手机 iphone xr',
MaxLineNumber: 2
},
{
type: 'rect',
width: 70,
height: 34,
left: 20,
top: 684,
background: '#ff4201',
radius: 8
},
{
type: 'text',
width: 400,
height: 50,
left: 20,
top: 690,
fontSize: 24,
lineHeight: 40,
bolder: true,
breakWord: true,
content: ' 活动',
color: '#ffffff',
MaxLineNumber: 2
},
{
type: 'text',
width: 400,
left: 20,
top: 770,
fontSize: 54,
bolder: true,
breakWord: true,
content: '¥0.0',
color: '#F40',
MaxLineNumber: 2
},
{
type: 'image',
width: 140,
height: 140,
top: 680,
left: 500,
// 可以使用网络和本地图片
url: '/static/images/test/qr.png'
},
]
},
};
},
methods: {
onSuccess(res) {
this.posterImg = res;
},
onError(res) {}
}
}>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
# 属性
属性名 | 类型 | 必填 | 描述 |
---|---|---|---|
width | Number | 是 | 画布宽度 (单位:px) |
height | Number | 是 | 画布高度(单位:px) |
background | String | 否 | 画布背景颜色 |
radius | Number | 否 | 圆角 |
views | Array | 否 | 海报的所有元素 |
# views.type='text'
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
type | String | 是 | 类型,值:text |
width | Number(单位:px) | 是 | 宽度 |
height | Number(单位:px) | 否 | 高度 |
left | Number(单位:px) | 否 | 距离海报左边距 |
top | Number(单位:px) | 否 | 距离海报上边距 |
fontSize | Number(单位:px) | 否 | 字体大小,默认:16 |
lineHeight | Number(单位:px) | 否 | 行高,默认:20 |
breakWord | Boolean | 否 | 是否自动换行,默认:false |
bolder | Boolean | 否 | 是否加粗,默认:false |
textAlign | String | 否 | 对齐方式,可选值:left、center、right,默认:left |
color | String | 否 | 字体颜色 |
content | String | 是 | 文本内容 |
MaxLineNumber | Number | 否 | 显示多少行,超出省略 |
# views.type='rect'
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
type | String | 是 | 类型,值:rect |
width | Number(单位:px) | 是 | 宽度 |
height | Number(单位:px) | 是 | 高度 |
left | Number(单位:px) | 否 | 距离海报左边距 |
top | Number(单位:px) | 否 | 距离海报上边距 |
radius | Number(单位:px) | 否 | 圆角半径,如果radius === width / 2,则是个圆,和CSS一样 |
background | String | 否 | 填充背景色 |
# views.type='image'
字段 | 类型 | 必填 | 描述 |
---|---|---|---|
type | String | 是 | 类型,值:image |
tailor | Number(单位:px) | 否 | 裁剪方式,可选值:center |
radius | Number(单位:px) | 否 | 圆角半径,如果radius === width / 2,则是个圆,和CSS一样 |
width | Number(单位:px) | 是 | 宽度 |
height | Number(单位:px) | 是 | 高度 |
left | Number(单位:px) | 否 | 距离海报左边距 |
top | Number(单位:px) | 否 | 距离海报上边距 |
url | String | 是 | 图片路径 |
# 事件
事件名 | 返回值 | 说明 |
---|---|---|
success | successData | 海报生成成功时触发 |
error | 海报生成失败错误信息 | 海报生成失败时触发 |
# successData
{
height: 394,
path: "",//H5时,路径为base64
width: 700,
}
1
2
3
4
5
2
3
4
5
# 感谢
← 二维码