Painter的使用心得

Painter的使用

关于Painter的使用可访问原github出处https://github.com/Kujiale-Mobile/Painter

里面很详细的介绍如何使用Painter这一插件，在这里就不多说了。

Painter和wxml-to-canvas的对比

我们都知道Painter和wxml-to-canvas，这两个都是小程序端绘制海报图的插件，个人来说更喜欢使用Painter。

1. • 首先Painter直接放在小程序组件中，需要时引用即可；
   • 而wxml-to-canvas要先在项目中构建npm才能在小程序使用。
2. • 在上一篇文章讲wxml-to-canvas的使用心得中讲过，this.widget = this.selectComponent('.widget')是完成widget对象初始化的，但canvas生成是需要一定时间的，onload函数中widget对象还没有初始化完毕就去调用this.widget.renderToCanvas({wxml,style})将wxml模板和wxss样式绘制到canvas上 的话，会导致页面报错，每次使用 wxml-to-canvas创建一个canvas都要使用一次定时器，使用越多，存在的问题可能越大；
   • 而Painter通过组件接收 palette 字段作为画图数据的数据源 ，根据 Palette 内容绘制出对应的图片后返回 ，无需调用一个定时器等待canvas生成。
3. • wxml-to-canvas的模板语法更接近小程序编写页面的语法；
   • Painter的话wxml模板可能不太接近。
4. • wxml-to-canvas的可用的css属性很少，比较局限，而且目前wxml-to-canvas仅支持px一个尺寸
   • Painter则更加灵活，增加了很多css属性，而且目前 Painter 中支持两种尺寸单位，px 和 rpx，代表的意思和小程序端中一致

5. • wxml-to-canvas不支持动态模板

   • Painter支持动态模板，支持使用拖动等操作动态编辑绘制内容

综上所述，如果有海报图的需求，建议使用Painter

Painter的致命缺点

1. Painter不能在一个页面中创建太多canvas（大概只有四五张是正常的，具体不清楚），不然某些手机会造成canvas一片空白，但其实这个问题可能是由于小程序原生的canvas就不能够在同一个页面在创建太多的canvas，创建越多，问题越多。

2. 目前Painter在iphoneXR会造成整体下移（原生canvas不会有这个问题，至于wxml-to-canvas会不会还不清楚），原因不清楚，作者也还未回复。

哈哈，感觉赞了Painter个寂寞，或许到头来反而是wxml-to-canvas更好用。