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
- 如果有什麼疑問,歡迎 issues。 如果覺得不錯,能不能送我小 ✨ ✨ ,然我有更多的動力更新。
- 當前的例子中沒有放置網絡圖片,並不代表不支持,你可以把 url 替換成網絡地址。
更新計劃
- [ ] 圖片緩存機制 - 加快相同圖片繪製的速度
閱讀更多 前端圈 的文章