微信小程序分享海报插件----Painter

微信小程序分享海报插件----Painter

Painter 的优势

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

1. 引入代码
2. 作为自定义组件引入，注意目录为第一步引入的代码所在目录
   “usingComponents”:{
   “painter”:"/components/painter/painter"
   }
3. 组件接收 palette 字段作为画图数据的数据源, 图案数据以json形式存在，推荐使用“皮肤模板”的方法进行传递，示例代码如下：
   
4. 数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。
   bind:imgOK=“onImgOK”
   bind:imgErr=“onImgErr”
   onImgOK(e) {
   其中 e.detail.path 为生成的图片路径
   },

注意：

1. 目前 Painter 中支持两种尺寸单位，px 和 rpx，代表的意思和小程序中一致，此处就不多说。
2. 目前子 view 的 css 属性支持 object 或 array。所以意味着，你可以把几个子 view 共用的 css属性提取出来。做到让 Palette 更加简洁。
3. 因为我们的 palette 是以 js 承载的 json，所以意味着你可以在每一个属性中很方便的加上自己的逻辑。也可以把某些属性单独提取出来，让多个 palette 共用，做到模块化
4. 如果你只希望获得一张生成的图片来展示，可以把 Painter 挪动到屏幕外进行绘制，绘制完后得到一张图片再进行展示，如下面这样

<painter style="position:fixed;top:-9999rpx" palette="{{userInfoTemplate}}" bind:imgOK="onImgOK" />

附上插件GitHub地址