前言
生成海报这个需求非常常见,一般用于分享朋友圈,自定义分享到群,开发者为了生成写了很多绘制代码。绘制代码看上去都差不多,有不得不写,很难受。
直到我遇见了它!
Painter:小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片
看效果
{
background: '#eee',
width: '654rpx',
height: '400rpx',
borderRadius: '20rpx',
views: [
{
type: 'image',
url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
css: {
top: '48rpx',
right: '48rpx',
width: '192rpx',
height: '192rpx',
},
}
...
],
}
绘制结果:
你没看错,就是如此简单,再也不用写绘制代码了!
功能与优势
- 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制
- 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)
- 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角
- 杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。
- 杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。
实现原理
开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。
看demo
从demo我们可以看出支持的样式和组件非常丰富,不仅如此还可以进行拖拽位置、对大家进行调整。
具体详细使用方法以及json规范可以点击下方地址项目主页查看。
大佬,文字怎么垂直居中?