动态文本.md

在制作分享海报过程中,一般有两种需求.

• 邀请卡样式的. 模板固定,一般只需要替换用户名,用户头像,邀请码等相关信息即可.
• 分享新闻. 这类虽然也是模板,但是因为新闻内容是动态的导致高度不确定,就需要先行知道元素的高度,再通过canvas进行绘制.

我们以即刻app的分享海报为例： 原图

实现的大致思路:

1. 移除动态文本后如下图,测量出需要绘制的元素的相应坐标(头像,用户名,时间,二维码,头尾图片等).
2. 头尾部分可直接使用图片.不包括尾部二维码,需要单独生成.
3. 计算新闻内容文本的真实高度.
4. 更新新闻内容之后元素的位置(尾部图片,二维码图片)和更新canvas高度.
5. 进行绘制.

在json2canvas里,你只需要按照设计稿以之前的写法,写出json,再改动两处即可

1. 设置动态文本元素的height属性为‘auto’
2. 设置动态文本元素的uiheight属性为设计稿中的高度.需要通过uiheight,对其他元素进行y值的调整

示例 你也可以尝试修改动态文本元素的text,查看效果.

完整的json

{
        "width": 750,
        "height": 1370,
        "scale": 0.6,
        "fillStyle": "#FFE410",
        "children": [
            {
                "type": "image",
                "url": "http://blog-res.mayday5.me/img/%E5%8A%A8%E6%80%81%E6%96%87%E6%9C%AC_%E5%A4%B4.jpg",
                "width": 750,
                "height": 70,
                "x": 0,
                "y": 0,
            },
            {
                "type": "group",
                "width": 722,
                "height": 990,
                "fillStyle": "#FFFFFF",
                "r": 20,
                "lb": false,
                "rb": false,
                "x": 14,
                "y": 84,
                "children": [
                    {
                        "type": "image",
                        "url": "https://tvax3.sinaimg.cn/crop.0.0.649.649.180/006Q5oMlly8flbvxffdvdj30i10i17wh.jpg",
                        "width": 80,
                        "x": 48,
                        "y": -40,
                        "isCircular": true,
                    }, {
                        "type": "circle",
                        "r": 40,
                        "lineWidth": 5,
                        "strokeStyle": "#FFFFFF",
                        "x": 48,
                        "y": -40,
                    }, {
                        "type": "text",
                        "text": "小咸鱼",
                        "font": "24px Arial",
                        "color": "#000000",
                        "x": 55,
                        "y": 60
                    }, {
                        "type": "text",
                        "text": "发表了一条动态",
                        "font": "24px Arial",
                        "color": "#BFBFBF",
                        "x": 55,
                        "y": 96
                    }, {
                        "type": "text",
                        "text": "我是一个没有背景色的主题",
                        "font": "24px Arial",
                        "color": "#49A9D6",
                        "textAlign": "right",
                        "x": 690,
                        "y": 79,
                    }, {
                        "type": "text",
                        "text": "6 / 27",
                        "font": "24px Arial",
                        "color": "#BFBFBF",
                        "x": 55,
                        "y": 166
                    }, {
                        "type": "text",
                        "text": "有没有那么一朵玫瑰\n永远不凋谢\n永远骄傲和完美\n永远不妥协\n为何人生最后会像\n一张纸屑\n还不如一片花瓣\n曾经鲜艳\n有没有那么一张书签\n停止那一天\n最单纯的笑脸和\n最美那一年",
                        "maxWidth": 580,
                        "lineHeight": 40,
                        "font": "30px Arial",
                        "color": "#333333",
                        "height": "auto",
                        "uiheight": 750,
                        "x": 55,
                        "y": 206
                    }
                ]
            }, {
                "type": "group",
                "url": "http://blog-res.mayday5.me/img/%E5%8A%A8%E6%80%81%E6%96%87%E6%9C%AC_%E5%B0%BE.jpg",
                "width": 750,
                "height": 318,
                "x": 0,
                "y": 1056,
                "children": [{
                    "type": "text",
                    "font": "24px Arial",
                    "color": "#333333",
                    "text": "我是二维码",
                    "x": 600,
                    "y": 150,
                }]
            }
        ]
    }