寫在前面最近在做小程序，發(fā)現(xiàn)制作分享到朋友圈圖片是每個項目必須的。
遇到坑比較多，寫起來也比較繁瑣，也沒有找到類似組件，所以就自己動手寫了一個。
演示左側是 canvasdrawer 繪制的，右側是UI給的圖特性簡單易用 —— 一個 json 搞定繪制圖片功能全 —— 滿足 90% 的使用場景繪制文本（換行、超出內容省略號、中劃線、下劃線、文本加粗）繪制圖片繪制矩形保存圖片多圖繪制...代碼量小體驗git clone https://github.com/kuckboy1994/mp_canvas_drawer想在手機上使用配置自己的 appid 即可。
編譯模式中已經(jīng)為你配置好比較常用的兩種模式：
普通繪制，繪制單張分享圖。
多圖繪制，連續(xù)繪制分享圖使用git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地把 components 中的 canvasdrawer 拷貝到自己項目下。
在使用頁面注冊組件{
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer" }
}
在頁面 **.wxml 文件中加入如下代碼 painting 是需要傳入的 json。
getImage 方法是繪圖完成之后的回調函數(shù)，在 event.detail 中返回繪制完成的圖片地址。
當前栗子中的 painting 簡單展示一下。
詳細配置請看 APIAPI數(shù)據(jù)對象的第一層需要三個參數(shù): width、height、views。
配置中所有的數(shù)字都是沒有單位的。
這就意味著 canvas 繪制的是一個比例圖。
具體顯示的大小直接把返回的圖片路徑放置到 image 標簽中即可。
當前可以繪制3種類型的配置: image、text、rect。
配置的屬性基本上使用的都是 css 的駝峰名稱，還是比較好理解的。
image（圖片）屬性含義默認值可選值url繪制的圖片地址，可以是本地圖片，如：
/images/1.jpegtop左上角距離畫板頂部的距離left左上角距離畫板左側的距離width要畫多寬0height要畫多高0text（文本）屬性含義默認值可選值content繪制的圖片地址'
'
(空字符串)color顏色blackfontSize字體大小16textAlign文字對齊方式leftcenter,rightlineHeight行高，只有在多行文本中才有用20rect (矩形，線條)屬性含義默認值可選值background背景顏色blacktop左上角距離畫板頂部的距離left左上角距離畫板左側的距離16width要畫多寬0height要畫多高0Q&A最佳實踐繪制操作的時候最好 鎖住屏幕 ，例如在點擊繪制的時候wx.showLoading({
title: '
繪制分享圖片中'
, mask: true}
)繪制完成之后wx.hideLoading()具體可以參考項目下的 /pages/multiple1.二維碼和小程序碼如何繪制？ 二維碼和小程序碼可以通過調用微信官方的接口產(chǎn)生，需要后端配合。
然后走 type: image 類型進行繪制即可。
2.繪制流程相關 views 數(shù)組中的順序代表繪畫的先后順序，會有覆蓋的現(xiàn)象。
請各位使用者注意。
3.如何實現(xiàn)圓形頭像？ canvas 中沒有繪制圓形圖片的方法，所以使用了 hack 的方式來實現(xiàn)的。
使用一張中間鏤空的圖片蓋在頭像上就可實現(xiàn)當前效果。
4.canvas drawer 組件為什么不直接顯示canvas畫板和其內容呢？ 考慮到大部分場景，我們都是用來把圖片保存到本地，或用以展示。
保存到本地，返回臨時文件給調用者一定是最佳的解決方式。
展示，轉化成圖片之后，就可以使用 image 基礎組件的所有顯示模式了，還能設置寬高。
推薦教程：
《微信小程序》以上就是微信小程序：
一個json幫你完成分享朋友圈圖片的詳細內容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
微信小程序本文轉載于：
掘金社區(qū)，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序知識點總結
下一篇：
你會用 vue 寫小程序嗎相關文章相關視頻微信小程序刮刮卡的實現(xiàn)微信小程序框架目前比較火的是？使用scss開發(fā)微信小程序如何實現(xiàn)微信小程序在電腦上玩微信小程序：
一個json幫你完成分享朋友圈圖片初識微信小程序(1)初識微信小程序(4)深入了解微信小程序(二) [溫州做微信公眾號]