微信小程序分享海报插件----Painter
Painter 的优势
功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制
布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)
支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角
杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。
杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。
- 引入代码
- 作为自定义组件引入,注意目录为第一步引入的代码所在目录
“usingComponents”:{
“painter”:"/components/painter/painter"
} - 组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在,推荐使用“皮肤模板”的方法进行传递,示例代码如下:
- 数据传入后,则会自动进行绘图。绘图完成后,你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。
bind:imgOK=“onImgOK”
bind:imgErr=“onImgErr”
onImgOK(e) {
其中 e.detail.path 为生成的图片路径
},
注意:
- 目前 Painter 中支持两种尺寸单位,px 和 rpx,代表的意思和小程序中一致,此处就不多说。
- 目前子 view 的 css 属性支持 object 或 array。所以意味着,你可以把几个子 view 共用的 css属性提取出来。做到让 Palette 更加简洁。
- 因为我们的 palette 是以 js 承载的 json,所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来,让多个 palette 共用,做到模块化
- 如果你只希望获得一张生成的图片来展示,可以把 Painter 挪动到屏幕外进行绘制,绘制完后得到一张图片再进行展示,如下面这样
<painter style="position:fixed;top:-9999rpx" palette="{{userInfoTemplate}}" bind:imgOK="onImgOK" />