小程序生成圖片庫的實現(xiàn)方式

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

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

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

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

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

畫家計劃

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

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

How To Use

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

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

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

使用 Painter

1. 引入代碼

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

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

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

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

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

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

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

Palette 規(guī)范

如你使用 wxss + wxml 規(guī)范進(jìn)行繪制一樣，Painter 需要根據(jù)一定的規(guī)范來進(jìn)行圖片繪制。當(dāng)然 Painter 的繪制規(guī)范要比 wxml 簡單很多。

調(diào)色板屬性

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

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

子 View 屬性

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

布局屬性

以上 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步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。更多小程序商店請查看：小程序商店