解鎖微信小程序繪圖新姿勢(shì):小程序簡(jiǎn)單繪圖，通過(guò) json 方式繪制一張朋友圈分享圖

esay-canvas

新增 esay-canvas。之后同步更新。

做微信小程序中最好用的 canvas 繪圖組件之一。

當(dāng)前環(huán)境下，大家都非常需要分享到朋友圈這個(gè)功能，但是實(shí)現(xiàn)起來(lái)各有心酸（坑比較多），所以才有了如下的 canvas 繪圖工具。

具有如下特性：

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

體驗(yàn)

git clone https://github.com/AfanSama/esay-canvas

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

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

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

使用

  • git clone https://github.com/AfanSama/esay-canvas 到本地
  • 把 components 中的 esay-canvas 拷貝到自己項(xiàng)目下。
  • 在使用頁(yè)面注冊(cè)組件 
    {
  "usingComponents": {
    "esay-canva": "/components/esay-canva/esay-canva"
  }
}
  • 在頁(yè)面 **.wxml 文件中加入如下代碼 
    <esay-canvas painting="{{painting}}" bind:getImage="eventGetImage"/>
    painting 是需要傳入的 json。 getImage 方法是繪圖完成之后的回調(diào)函數(shù)，在 event.detail 中返回繪制完成的圖片地址。
  • 當(dāng)前栗子中的 painting 簡(jiǎn)單展示一下。詳細(xì)配置請(qǐng)看 API

<details><summary>painting（點(diǎn)擊展開(kāi)）</summary>

painting: {
      width: 375,
      height: 555,
      clear: true,
      views: [{
          type: 'image',
          url: '/images/background.jpg',
          top: 0,
          left: 0,
          width: 375,
          height: 555
        },
        {
          type: 'roundrect',
          background: "#fff",
          top: 57.5,
          left: 88,
          width: 280,
          height: 25,
          radius:10
        },
        {
          type: 'image',
          url: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM7v6mLlMiblTaIBuq8VYHVBj61wC69r1jfz4wvjicSsMnKg/0',
          top: 27.5,
          left: 29,
          width: 55,
          height: 55,
          borderRadius: true
        },
        {
          type: 'text',
          content: '您的好友【Afan】',
          fontSize: 16,
          color: '#fff',
          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: '/images/pic.jpg',
          top: 136,
          left: 42.5,
          width: 290,
          height: 186
        },
        {
          type: 'image',
          url: '/images/qrcode.jpg',
          top: 470,
          left: 85,
          width: 68,
          height: 68,
          borderRadius: true
        },
        {
          type: 'text',
          content: '正品MAC魅可口紅禮盒生日唇膏小辣椒Chili西柚情人',
          fontSize: 16,
          lineHeight: 21,
          color: '#fff',
          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: 483,
          left: 165.5,
          lineHeight: 20,
          MaxLineNumber: 2,
          breakWord: true,
          width: 125
        }
      ]
    }

</details>

API

<details><summary>對(duì)象結(jié)構(gòu)一覽</summary>

{
  width: 375,
  height: 555,
  views: [
    {
      type: 'image',
      url: 'url',
      top: 0,
      left: 0,
      width: 375,
      height: 555,
      borderRadius: true
    },
    {
      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
    },
    {
      type: 'roundrect',
      background: "#fff",
      y: 57.5,
      x: 88,
      width: 280,
      height: 25,
      radius:10
    }
  ]
}

</details>

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

mode 可選值有 same, 默認(rèn)值為空，常規(guī)下盡量不要使用。如要使用請(qǐng)看 Q&A的第1點(diǎn)。

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

image（圖片）

屬性 含義 默認(rèn)值 可選值
url 繪制的圖片地址，可以是本地圖片，如：/images/1.jpeg
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側(cè)的距離
width 要畫多寬 0
height 要畫多高 0
borderRadius 是否圓形 0 true

text（文本）

屬性 含義 默認(rèn)值 可選值
content 繪制文本 ''（空字符串）
color 顏色 black
fontSize 字體大小 16
textAlign 文字對(duì)齊方式 left center、right
lineHeight 行高，只有在多行文本中才有用 20
top 文本左上角距離畫板頂部的距離 0
left 文本左上角距離畫板左側(cè)的距離 0
breakWord 是否需要換行 false true
MaxLineNumber 最大行數(shù)，只有設(shè)置 breakWord: true ，當(dāng)前屬性才有效，超出行數(shù)內(nèi)容的顯示為... 2
width 和 MaxLineNumber 屬性配套使用，width 就是達(dá)到換行的寬度
bolder 是否加粗 false true
textDecoration 顯示中劃線、下劃線效果 none underline（下劃線）、line-through（中劃線）

rect (矩形，線條)

屬性 含義 默認(rèn)值 可選值
background 背景顏色 black
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側(cè)的距離
width 要畫多寬 0
height 要畫多高 0

roundrect(圓角矩形)

屬性 含義 默認(rèn)值 可選值
background 背景顏色 black
top 左上角距離畫板頂部的距離
left 左上角距離畫板左側(cè)的距離
width 要畫多寬 0
height 要畫多高 0
radius 圓角度數(shù) 0

Q&A

  1. 最佳實(shí)踐

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

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

    繪制完成之后

    wx.hideLoading()

他們都在用 esay-canvas

<img src="https://user-gold-cdn.xitu.io/2018/8/8/1651749935cebb2b" width=150 height=150 />

TIPS

如果有什么疑問(wèn)，歡迎 issues。 如果覺(jué)得不錯(cuò)，能不能送我小 ? ? ，讓我有更多的動(dòng)力。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容