# 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

在 template 中使用

<view>
    <posters-layer :postersData="postersData" @success="onSuccess" @error="onError" />
</view>

1
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

# 属性

属性名	类型	必填	描述
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

# 感谢

← 二维码