由于我們無法將小程序直接分享到朋友圈，但分享到朋友圈的需求目前又很多，業界目前的做法是利用小程序的 Canvas 功能生成一張帶有二維碼的圖片，然后引導用戶下載圖片到本地后再分享到朋友圈。而小程序 Canvas 功能是很難用的，往往為了繪制一張簡單圖片，就得寫上一堆 boilerplate code 。如果此時一個小程序中包含多個繪圖的需求，那絕壁要瘋。另外 Canvas 上有很多繪圖的坑，肯定會讓你瘋上加瘋。

這邊說上幾個小程序 Canvas 的坑：

1， Canvas 繪圖是用的 px，而在小程序中我們一般使用 rpx 進行相對布局。

2，小程序的 drawCanvas 方法，在 IDE 中可以直接設置網絡圖片進行繪制，但在真機上設置網絡圖片無用。

3，canvasContext.clip 方法在 iOS 設備上 微信 6.6.6 版本及以下有 bug，會導致該 clip 下面使用的的 restore 方法失效。

畫家計劃

想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹。那我們就想到可不可以做一款可以很方便生成圖片的庫，而且還能屏蔽掉直接使用 Canvas 的那些坑呢。所以我們發起了 “畫家計劃— 通過 json 數據形式，來進行動態渲染并繪制出圖片”。 

首先，我們定義了一套繪圖 JSON 規范，開發者可以根據需求構建生成圖片的 Palette（調色板），然后在程序運行過程中把調色板傳入給 Painter（畫家）。Painter 會調用 Pen（畫筆），根據 Palette 內容繪制出對應的圖片后返回。

How To Use

因該項目為 submodule 管理方式。首次 clone 代碼時，需加上 --recursive 參數。

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive

代碼下載后，用小程序 IDE 打開后即可使用。

使用 Painter

1. 引入代碼

   可以在主項目下執行以下命令，通過 submodule 的方式引入 painter 組件。建議是在 components 目錄下。

   git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
   

2. 作為自定義組件引入，注意目錄為第一步引入的代碼所在目錄

   "usingComponents":{
     "painter":"/components/painter/painter"
   }
   

3. 組件接收 palette 字段作為畫圖數據的數據源, 圖案數據以json形式存在，推薦使用“皮膚模板”的方法進行傳遞，示例代碼如下：

4. 數據傳入后，則會自動進行繪圖。繪圖完成后，你可以通過綁定 imgOK 或 onImgErr 事件來獲得成功后的圖片 或失敗的原因。

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"
   

Palette 規范

如你使用 wxss + wxml 規范進行繪制一樣，Painter 需要根據一定的規范來進行圖片繪制。當然 Painter 的繪制規范要比 wxml 簡單很多。

調色板屬性

一個調色板首先需要給予一些整體屬性

background: 可以是顏色值，也可以為網絡圖片的鏈接，默認為白色
width: 寬度
height: 高度
borderRadius: 邊框的圓角（該屬性也同樣適用于子 view）
views: 里面承載子 view

子 View 屬性

當我們把整體的調色板屬性構建起來后，里面就可以添加子 View 來進行繪制了。

布局屬性

以上 View ，除去自己擁有的特別屬性外，還有以下的通用布局屬性

尺寸即其他

1，目前 Painter 中支持兩種尺寸單位，px 和 rpx，代表的意思和小程序中一致，此處就不多說。

2，目前子 view 的 css 屬性支持 object 或 array。所以意味著，你可以把幾個子 view 共用的 css 屬性提取出來。做到讓 Palette 更加簡潔。

3，因為我們的 palette 是以 js 承載的 json，所以意味著你可以在每一個屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨提取出來，讓多個 palette 共用，做到模塊化。

舉個栗子

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店