json2poster
介绍
微信小程序生成canvas海报
借鉴（抄袭）willnewii，增加了一点，优化了一点
安装教程
// Gitee
git clone git@gitee.com:jiangjingmin/json2poster.git
// Github
git clone git@github.com:jiangjingmin/json2poster.git
使用说明
- 支持缩放 如果设计稿是750,而画布只有375时.你不需要任何换算,只需要将scale设置为0.5
- 支持分组(cax里很好用的一个功能)
- 图片支持圆角
- 支持圆型,矩形,矩形圆角(背景色支持线性渐变)
- 文本支持竖排,长文本自动换行
- 支持动态文本
配置项
Canvas（画布）
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| width | Number | 是 | 画布宽度，一般设计稿为750 | |
| height | Number | 是 | 画布高度 | |
| x | Number | 0 | 否 | 相对于画布左侧的距离 |
| y | Number | 0 | 否 | 相对于画布顶部的距离 |
| scale | Number | 1 | 否 | 是否缩放画布 |
......
Group（组）
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| type | String | group | 是 | 绘制类型 |
| width | Number | 是 | 宽度 | |
| height | Number | 是 | 高度 | |
| x | Number | 0 | 否 | 相对于父元素左侧的距离 |
| y | Number | 0 | 否 | 相对于父元素顶部的距离 |
......
Text（文本）
| 属性 | 类型 | 默认值 / 示例 | 必填 | 说明 |
|---|---|---|---|---|
| type | String | text | 是 | 绘制类型 |
| height | Number | 是 | 如果文本为动态内容可设置为'auto' | |
| uiheight | Number | 否 | 如果是动态内容，可设置文本区域最大高度 | |
| x | Number | 0 | 否 | 相对于父元素左侧的距离 |
| y | Number | 0 | 否 | 相对于父元素顶部的距离 |
......
Image（图片）
| 属性 | 类型 | 默认值 / 示例 | 必填 | 说明 |
|---|---|---|---|---|
| type | String | image | 是 | 绘制类型 |
| width | Number | 是 | 宽度 | |
| height | Number | 是 | 高度 | |
| x | Number | 0 | 否 | 相对于父元素左侧的距离 |
| y | Number | 0 | 否 | 相对于父元素顶部的距离 |
......
Circle（圆）
| 属性 | 类型 | 默认值 / 示例 | 必填 | 说明 |
|---|---|---|---|---|
| type | String | circle | 是 | 绘制类型 |
| width | Number | 是 | 宽度 | |
| height | Number | 是 | 高度 | |
| x | Number | 0 | 否 | 相对于父元素左侧的距离 |
| y | Number | 0 | 否 | 相对于父元素顶部的距离 |
| r | Number | 20 | 否 | 半径 |
......
Rect（矩形）
| 属性 | 类型 | 默认值 / 示例 | 必填 | 说明 |
|---|---|---|---|---|
| type | String | rect | 是 | 绘制类型 |
| width | Number | 是 | 宽度 | |
| height | Number | 是 | 高度 | |
| x | Number | 0 | 否 | 相对于父元素左侧的距离 |
| y | Number | 0 | 否 | 相对于父元素顶部的距离 |
| r | Number | 20 | 否 | 半径 |
......
示例：
var posterConfig = {
"width": 750,
"height": 1370,
"scale": 1,
"fillStyle": "#FFFFFF",
"children": [
{
"type": "group",
"width": 600,
"height": 460,
"x": 0,
"y": 0,
"children": [
{
"type": "text",
"text": "内容",
"maxWidth": 580,
"lineHeight": 40,
"textAlign": "right",
"font": "30px Arial",
"color": "#333333",
"height": "auto",
"uiheight": 200,
"x": 30,
"y": 30
},
{
"type": "image",
"width": 100,
"height": 200,
"x": 30,
"y": 260,
"url": "/images/default-person.png",
"isCircular": true,
"fixHeight": true,
"r": 10,
}
]
}
]
