canvas繪製圖片小程序

canvas drawer

源碼下載地址:

連接: https://pan.baidu.com/s/1GxnM6XHRpm_sZjpmbbEzqA 提取碼: 5s6y 

新增 mpvue_canvas_drawer。以後同步更新。

新增由simmzl開發移植的wepy_canvas_drawer。以後同步更新。

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

當前環境下，你們都很是須要分享到朋友圈這個功能，可是實現起來各有心酸（坑比較多），因此纔有了以下的 canvas 繪圖工具。

具備以下特性：

• 簡單易用 —— 一個 json 搞定繪製圖片
• 功能全 —— 知足 90% 的使用場景
  • 繪製文本（換行、超出內容省略號、中劃線、下劃線、文本加粗）
  • 繪製圖片
  • 繪製矩形
  • 保存圖片
  • 多圖繪製
  • ...
• 代碼量小

體驗

git clone https://github.com/kuckboy1994/mp_canvas_drawer

想在手機上使用配置本身的 appid 便可。

編譯模式中已經爲你配置比如較經常使用的兩種模式：

• 普通繪製，繪製單張分享圖。
• 多圖繪製，連續繪製分享圖

演示

左側是 canvasdrawer 繪製的，右側是UI給的圖

使用

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

• 把 components 中的 canvasdrawer 拷貝到本身項目下。

• 在使用頁面註冊組件

  {
    "usingComponents": {
      "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
    }
  }

• 在頁面 **.wxml 文件中加入以下代碼

  <canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

  painting 是須要傳入的 json。 getImage 方法是繪圖完成以後的回調函數，在 event.detail 中返回繪製完成的圖片地址。

• 當前栗子中的 painting 簡單展現一下。詳細配置請看 API

  painting（點擊展開）

API

對象結構一覽

數據對象的第一層須要三個參數: width、height、mode、views。配置中全部的數字都是沒有單位的。這就意味着 canvas 繪製的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標籤中便可。

mode 可選值有 same, 默認值爲空，常規下儘可能不要使用。如要使用請看 Q&A的第1點。

當前能夠繪製3種類型的配置: image、text、rect。配置的屬性基本上使用的都是 css 的駝峯名稱，仍是比較好理解的。

image（圖片）

屬性	含義	默認值	可選值
url	繪製的圖片地址，能夠是本地圖片，如：/images/1.jpeg
top	左上角距離畫板頂部的距離
left	左上角距離畫板左側的距離
width	要畫多寬	0
height	要畫多高	0

text（文本）

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

rect (矩形，線條)

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

Q&A

1. 最佳實踐

   繪製操做的時候最好 鎖住屏幕 ，例如在點擊繪製的時候

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

   繪製完成以後

   wx.hideLoading()

   具體能夠參考項目下的 /pages/multiple

2. [mpvue] 因爲 canvasdrawer 不主動呈現繪製內容，而是交給調用者去使用 image 來展現，因此在mpvue更新數據就會render整個組件的，以後 canvasdrawer 又會從新被渲染，致使無限循環，因此默認狀況下我把代碼改成，傳入的 painting 和以前的同樣的話，組件就不渲染了。只有出現差別的內容纔會更新（觸發回調），這種我的認爲仍是能夠接受的。 增長頂層參數 mode, mode: 'same' 爲能夠繪製一樣的內容。在 mpvue 模式下勿用。

3. 二維碼和小程序碼如何繪製？

   • 二維碼和小程序碼能夠經過調用微信官方的接口產生，須要後端配合。
   • 而後走 type: image 類型進行繪製便可。

4. 繪製流程相關

   • views 數組中的順序表明繪畫的前後順序，會有覆蓋的現象。請各位使用者注意。

5. 如何實現圓形頭像？

   • 因爲完成一些效果，例如： 文字下劃線 等。必需要使用微信小程序 rect 相關的接口，和 clip 接口感受相處的很差（存在bug）。能夠查看 微信小程序社區的帖子。
   • so，提供一種解決方式：使用一張中間鏤空的圖片蓋在頭像上。

6. canvas drawer 組件爲何不直接顯示canvas畫板和其內容呢？

   • 考慮到大部分場景，咱們都是用來把圖片保存到本地，或用以展現。
   • 保存到本地，返回臨時文件給調用者必定是最佳的解決方式。
   • 展現，轉化成圖片以後，就可使用 image 基礎組件的全部顯示模式了，還能設置寬高。