背景
由於我們無法將小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，業界目前的做法是利用小程序的 Canvas 功能生成一張帶有二維碼的圖片，然后引導用戶下載圖片到本地后再分享到朋友圈。而小程序 Canvas 功能是很難用的，往往為了繪制一張簡單圖片，就得寫上一堆 boilerplate code ，而且一不小心還會踩到 Canvas 的各種彩蛋（坑）。我想此時你的心情肯定是這樣的。
分析
想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹。那我們就想到可不可以做一款可以很方便生成圖片，並且還能屏蔽掉直接使用 Canvas 的一些坑的庫呢？所以我們發起了 “畫家計划— 通過 json 數據形式，來進行動態渲染並繪制出圖片”。 Painter 庫的整體架構如下：
首先，我們定義了一套繪圖 JSON 規范，開發者可以根據需求構建生成圖片的 Palette（調色板），然后在程序運行過程中把調色板傳入給 Painter（畫家）。Painter 會調用 Pen（畫筆），根據 Palette 內容繪制出對應的圖片后返回。
解決問題
那可不可以開發一款生成海報的插件庫呢?
- 首先，只需要提供一份簡單的參數配置文件即可
- 解決掉小程序Canvas遇到的一些大大小小的坑
- 有嚴苛的測試環節，解決各種環境和各種機型遇到的問題，並提供穩定的線上版本
- 長期維護，並有專人更新迭代更新穎的功能
隆重介紹
Painter 的優勢
- 功能全，支持文本、圖片、矩形、qrcode 類型的 view 繪制
- 布局全，支持多種布局方式，如 align（對齊方式）、rotate（旋轉）
- 支持漸變色，陰影，配置簡單，容易上手，兼容性好
- 支持圓角，其中圖片，矩形，和整個畫布支持 borderRadius 來設置圓角
- 杠杠的性能優化，我們對網絡素材圖片加載實現了一套 LRU 存儲機制，不用重復下載素材圖片。
- 杠杠的容錯，因為某些特殊情況會導致 Canvas 繪圖不完整。我們對此加入了對結果圖片進行檢測機制，如果繪圖出錯會進行重繪。
How To Use
運行例子
git clone https://github.com/Kujiale-Mobile/Painter.git
代碼下載后，用小程序 IDE 打開后即可使用。
注：請選擇小程序項目，非小游戲，例子中無 appid，所以無法在手機上運行，如果需要真機調試，請在打開例子時，填上自己的小程序 id
具體詳細使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter
擴展工具
由於編寫配置再加上調試還是有些麻煩,故制作一款可視化編輯工具,直接拖動編輯元素即可生成海報
可視化編輯拖拽直接生成painter代碼
- 工具體驗地址https://lingxiaoyi.github.io/painter-custom-poster/
- 工具使用文檔https://juejin.im/post/5d8b20ba51882509615bca09
例子展示
