最近在做小程序，發(fā)現(xiàn)制作分享到朋友圈圖片是每個(gè)項(xiàng)目必須的。遇到坑比較多，寫(xiě)起來(lái)也比較繁瑣，也沒(méi)有找到類似組件，所以就自己動(dòng)手寫(xiě)了一個(gè)。

特性

• 簡(jiǎn)單易用 —— 一個(gè) json 搞定繪制圖片
• 功能全 —— 滿足 90% 的使用場(chǎng)景
  • 繪制文本（換行、超出內(nèi)容省略號(hào)、中劃線、下劃線、文本加粗）
  • 繪制圖片
  • 繪制矩形
  • 保存圖片
  • 多圖繪制
  • ...
• 代碼量小

體驗(yàn)

git clone https://github.com/kuckboy1994/mp_canvas_drawer
復(fù)制代碼

想在手機(jī)上使用配置自己的 appid 即可。

編譯模式中已經(jīng)為你配置好比較常用的兩種模式：

• 普通繪制，繪制單張分享圖。
• 多圖繪制，連續(xù)繪制分享圖

使用

• git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地

• 把 components 中的 canvasdrawer 拷貝到自己項(xiàng)目下。

• 在使用頁(yè)面注冊(cè)組件

  {
    "usingComponents": {
      "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
    }
  }
  復(fù)制代碼

• 在頁(yè)面 **.wxml 文件中加入如下代碼

  <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
  復(fù)制代碼

  painting 是需要傳入的 json。 getImage 方法是繪圖完成之后的回調(diào)函數(shù)，在 event.detail 中返回繪制完成的圖片地址。

• 當(dāng)前栗子中的 painting 簡(jiǎn)單展示一下。詳細(xì)配置請(qǐng)看 API

  painting（點(diǎn)擊展開(kāi)）

  
  

  {
    width: 375,
    height: 555,
    views: [
      {
        type: 'image',
        url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
        top: 0,
        left: 0,
        width: 375,
        height: 555
      },
      {
        type: 'image',
        url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',
        top: 27.5,
        left: 29,
        width: 55,
        height: 55
      },
      {
        type: 'image',
        url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
        top: 27.5,
        left: 29,
        width: 55,
        height: 55
      },
      {
        type: 'text',
        content: '您的好友【kuckboy】',
        fontSize: 16,
        color: '#402D16',
        textAlign: 'left',
        top: 33,
        left: 96,
        bolder: true
      },
      {
        type: 'text',
        content: '發(fā)現(xiàn)一件好貨，邀請(qǐng)你一起0元免費(fèi)拿！',
        fontSize: 15,
        color: '#563D20',
        textAlign: 'left',
        top: 59.5,
        left: 96
      },
      {
        type: 'image',
        url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
        top: 136,
        left: 42.5,
        width: 290,
        height: 186
      },
      {
        type: 'image',
        url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',
        top: 443,
        left: 85,
        width: 68,
        height: 68
      },
      {
        type: 'text',
        content: '正品MAC魅可口紅禮盒生日唇膏小辣椒Chili西柚情人',
        fontSize: 16,
        lineHeight: 21,
        color: '#383549',
        textAlign: 'left',
        top: 336,
        left: 44,
        width: 287,
        MaxLineNumber: 2,
        breakWord: true,
        bolder: true
      },
      {
        type: 'text',
        content: '￥0.00',
        fontSize: 19,
        color: '#E62004',
        textAlign: 'left',
        top: 387,
        left: 44.5,
        bolder: true
      },
      {
        type: 'text',
        content: '原價(jià):￥138.00',
        fontSize: 13,
        color: '#7E7E8B',
        textAlign: 'left',
        top: 391,
        left: 110,
        textDecoration: 'line-through'
      },
      {
        type: 'text',
        content: '長(zhǎng)按識(shí)別圖中二維碼幫我砍個(gè)價(jià)唄~',
        fontSize: 14,
        color: '#383549',
        textAlign: 'left',
        top: 460,
        left: 165.5,
        lineHeight: 20,
        MaxLineNumber: 2,
        breakWord: true,
        width: 125
      }
    ]
  }
  復(fù)制代碼

API

{
  width: 375,
  height: 555,
  views: [
    {
      type: 'image',
      url: 'url',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    },
    {
      type: 'text',
      content: 'content',
      fontSize: 16,
      color: '#402D16',
      textAlign: 'left',
      top: 33,
      left: 96,
      bolder: true
    },
    {
      type: 'rect',
      background: 'color',
      top: 0,
      left: 0,
      width: 375,
      height: 555
    }
  ]
}
復(fù)制代碼

數(shù)據(jù)對(duì)象的第一層需要三個(gè)參數(shù): width、height、views。配置中所有的數(shù)字都是沒(méi)有單位的。這就意味著 canvas 繪制的是一個(gè)比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標(biāo)簽中即可。

當(dāng)前可以繪制3種類型的配置: image、text、rect。配置的屬性基本上使用的都是 css 的駝峰名稱，還是比較好理解的。

image（圖片）

text（文本）

rect (矩形，線條)

Q&A

0. 最佳實(shí)踐

   繪制操作的時(shí)候最好 鎖住屏幕 ，例如在點(diǎn)擊繪制的時(shí)候

   wx.showLoading({
     title: '繪制分享圖片中',
     mask: true
   })
   復(fù)制代碼

   繪制完成之后

   wx.hideLoading()
   復(fù)制代碼

   具體可以參考項(xiàng)目下的 /pages/multiple

1. 二維碼和小程序碼如何繪制？

   • 二維碼和小程序碼可以通過(guò)調(diào)用微信官方的接口產(chǎn)生，需要后端配合。
   • 然后走 type: image 類型進(jìn)行繪制即可。

2. 繪制流程相關(guān)

   • views 數(shù)組中的順序代表繪畫(huà)的先后順序，會(huì)有覆蓋的現(xiàn)象。請(qǐng)各位使用者注意。

3. 如何實(shí)現(xiàn)圓形頭像？

   • canvas 中沒(méi)有繪制圓形圖片的方法，所以使用了 hack 的方式來(lái)實(shí)現(xiàn)的。使用一張中間鏤空的圖片蓋在頭像上就可實(shí)現(xiàn)當(dāng)前效果。

4. canvas drawer 組件為什么不直接顯示canvas畫(huà)板和其內(nèi)容呢？

   • 考慮到大部分場(chǎng)景，我們都是用來(lái)把圖片保存到本地，或用以展示。
   • 保存到本地，返回臨時(shí)文件給調(diào)用者一定是最佳的解決方式。
   • 展示，轉(zhuǎn)化成圖片之后，就可以使用 image 基礎(chǔ)組件的所有顯示模式了，還能設(shè)置寬高。