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更好用。