评论

小程序生成海报:通过 json 配置方式轻松制作一张海报图

小程序生成海报:通过 json 配置方式轻松制作一张海报图, 另附辅助工具:可视化编辑拖拽直接生成painter代码

背景

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code ,而且一不小心还会踩到 Canvas 的各种彩蛋(坑)。我想此时你的心情肯定是这样的。

分析

想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片,并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢?所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下:

首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。

解决问题

那可不可以开发一款生成海报的插件库呢?

  • 首先,只需要提供一份简单的参数配置文件即可
  • 解决掉小程序Canvas遇到的一些大大小小的坑
  • 有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本
  • 长期维护,并有专人更新迭代更新颖的功能

###隆重介绍

Painter 的优势

  • 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制
  • 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)
  • 支持渐变色,阴影,配置简单,容易上手,兼容性好
  • 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角
  • 杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。
  • 杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。

How To Use

运行例子

git clone https://github.com/Kujiale-Mobile/Painter.git

代码下载后,用小程序 IDE 打开后即可使用。

注:请选择小程序项目,非小游戏,例子中无 appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序 id

具体详细使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter

扩展工具

由于编写配置再加上调试还是有些麻烦,故制作一款可视化编辑工具,直接拖动编辑元素即可生成海报
可视化编辑拖拽直接生成painter代码

例子展示




最后一次编辑于  2019-10-14  
点赞 3
收藏
评论

4 个评论

  • 铭锋科技
    铭锋科技
    2019-10-14

    不错,例子图没了

    2019-10-14
    赞同 1
    回复
  • 树
    2021-01-03

    大佬,文字怎么垂直居中啊?文字行数不确定,怎么垂直居中在view里面

    2021-01-03
    赞同
    回复
  • 蚂蚁骑大象
    蚂蚁骑大象
    2020-12-09

    你好,我用这个工具,添加的手机拍的照片长方形,我设置宽高一样,发现形状没变化,请问知道怎么回事吗?

    2020-12-09
    赞同
    回复
  • Youngwell
    Youngwell
    2019-12-26

    有bug啊。大佬,在安卓手机图片不显示,微信7.0.7,基础库2.9.4

    2019-12-26
    赞同
    回复 1
    • 志军
      志军
      2019-12-27
      这个问题你去github问问,这个库不是我维护的
      2019-12-27
      回复
登录 后发表内容