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

這邊說(shuō)上幾個(gè)小程序 Canvas 的坑：

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

2，小程序的 drawCanvas 方法，在 IDE 中可以直接設(shè)置網(wǎng)絡(luò)圖片進(jìn)行繪制，但在真機(jī)上設(shè)置網(wǎng)絡(luò)圖片無(wú)用。

3，canvasContext.clip 方法在 iOS 設(shè)備上 微信 6.6.6 版本及以下有 bug，會(huì)導(dǎo)致該 clip 下面使用的的 restore 方法失效。

畫(huà)家計(jì)劃

想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹。那我們就想到可不可以做一款可以很方便生成圖片的庫(kù)，而且還能屏蔽掉直接使用 Canvas 的那些坑呢。所以我們發(fā)起了 “畫(huà)家計(jì)劃— 通過(guò) json 數(shù)據(jù)形式，來(lái)進(jìn)行動(dòng)態(tài)渲染并繪制出圖片”。 Painter 庫(kù)的整體架構(gòu)如下：

首先，我們定義了一套繪圖 JSON 規(guī)范，開(kāi)發(fā)者可以根據(jù)需求構(gòu)建生成圖片的 Palette（調(diào)色板），然后在程序運(yùn)行過(guò)程中把調(diào)色板傳入給 Painter（畫(huà)家）。Painter 會(huì)調(diào)用 Pen（畫(huà)筆），根據(jù) Palette 內(nèi)容繪制出對(duì)應(yīng)的圖片后返回。

How To Use

運(yùn)行例子

因該項(xiàng)目為 submodule 管理方式。首次 clone 代碼時(shí)，需加上 --recursive 參數(shù)。

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

代碼下載后，用小程序 IDE 打開(kāi)后即可使用。
使用 Painter

1. 引入代碼

   可以在主項(xiàng)目下執(zhí)行以下命令，通過(guò) submodule 的方式引入 painter 組件。建議是在 components 目錄下。

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

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

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

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

4. 數(shù)據(jù)傳入后，則會(huì)自動(dòng)進(jìn)行繪圖。繪圖完成后，你可以通過(guò)綁定 imgOK 或 onImgErr 事件來(lái)獲得成功后的圖片 或失敗的原因。

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"Palette 規(guī)范

如你使用 wxss + wxml 規(guī)范進(jìn)行繪制一樣，Painter 需要根據(jù)一定的規(guī)范來(lái)進(jìn)行圖片繪制。當(dāng)然 Painter 的繪制規(guī)范要比 wxml 簡(jiǎn)單很多。調(diào)色板屬性

一個(gè)調(diào)色板首先需要給予一些整體屬性

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

當(dāng)我們把整體的調(diào)色板屬性構(gòu)建起來(lái)后，里面就可以添加子 View 來(lái)進(jìn)行繪制了。

布局屬性

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

尺寸即其他

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

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

3，因?yàn)槲覀兊?palette 是以 js 承載的 json，所以意味著你可以在每一個(gè)屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨(dú)提取出來(lái)，讓多個(gè) palette 共用，做到模塊化。

舉個(gè)栗子

{
  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',
    },
  }
  ],
}

繪制效果如下