寫在前面
最近在做小程序,發現制作分享到朋友圈圖片是每個項目必須的。遇到坑比較多,寫起來也比較繁瑣,也沒有找到類似組件,所以就自己動手寫了一個。
演示
image
左側是 canvasdrawer
繪制的,右側是UI給的圖
image
特性
- 簡單易用 —— 一個
json
搞定繪制圖片 - 功能全 —— 滿足
90%
的使用場景- 繪制文本(換行、超出內容省略號、中劃線、下劃線、文本加粗)
- 繪制圖片
- 繪制矩形
- 保存圖片
- 多圖繪制
- ...
- 代碼量小
體驗
git clone https://user-gold-cdn.xitu.io/2018/7/13/16491baf33e98a98
想在手機上使用配置自己的 appid
即可。
編譯模式中已經為你配置好比較常用的兩種模式:
- 普通繪制,繪制單張分享圖。
- 多圖繪制,連續繪制分享圖
使用
-
git clone https://user-gold-cdn.xitu.io/2018/7/13/16491baf33e98a98
到本地 - 把
components
中的canvasdrawer
拷貝到自己項目下。 - 在使用頁面注冊組件
{ "usingComponents": { "canvasdrawer": "/components/canvasdrawer/canvasdrawer" } }
- 在頁面
**.wxml
文件中加入如下代碼<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>
painting
是需要傳入的json
。getImage
方法是繪圖完成之后的回調函數,在event.detail
中返回繪制完成的圖片地址。 - 當前栗子中的
painting
簡單展示一下。詳細配置請看 API
API
對象結構一覽
{
width: 375,
height: 555,
views: [
{
type: 'image',
url: 'url',
top: 0,
left: 0,
width: 375,
height: 555
},
{
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
}
]
}
數據對象的第一層需要三個參數: width
、height
、views
。配置中所有的數字都是沒有單位的。這就意味著 canvas
繪制的是一個比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image
標簽中即可。
當前可以繪制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
-
最佳實踐
繪制操作的時候最好
鎖住屏幕
,例如在點擊繪制的時候wx.showLoading({ title: '繪制分享圖片中', mask: true })
繪制完成之后
wx.hideLoading()
具體可以參考項目下的
/pages/multiple
-
二維碼和小程序碼如何繪制?
- 二維碼和小程序碼可以通過調用微信官方的接口產生,需要后端配合。
- 然后走
type: image
類型進行繪制即可。
-
繪制流程相關
-
views
數組中的順序代表繪畫的先后順序,會有覆蓋的現象。請各位使用者注意。
-
-
如何實現圓形頭像?
-
canvas
中沒有繪制圓形圖片的方法,所以使用了hack
的方式來實現的。使用一張中間鏤空的圖片蓋在頭像上就可實現當前效果。
-
-
canvas drawer
組件為什么不直接顯示canvas畫板和其內容呢?- 考慮到大部分場景,我們都是用來把圖片保存到本地,或用以展示。
- 保存到本地,返回臨時文件給調用者一定是最佳的解決方式。
- 展示,轉化成圖片之后,就可以使用
image
基礎組件的所有顯示模式了,還能設置寬高。
TIPS
如果有什么疑問,歡迎 issues
。 如果覺得不錯,能不能送我小 ? ? ,然我有更多的動力更新。