canvas drawer

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

當前環境下，大家都非常需要分享到朋友圈這個功能，但是實現起來各有心酸（坑比較多），所以才有瞭如下的 canvas 繪圖工具。

具有如下特性：

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

體驗

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

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

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

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

演示

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

API

對象結構一覽

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

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

image（圖片）

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

text（文本）

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

rect (矩形，線條)

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

TIPS

1. 如果有什麼疑問，歡迎 issues。 如果覺得不錯，能不能送我小 ✨ ✨ ，然我有更多的動力更新。
2. 當前的例子中沒有放置網絡圖片，並不代表不支持，你可以把 url 替換成網絡地址。

更新計劃

• [ ] 圖片緩存機制 - 加快相同圖片繪製的速度

閱讀更多 前端圈 的文章

關鍵字: CSS JSON 繪製