本篇文章為大家展示了使用canvas怎么繪制一個(gè)圖片小程序，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)主營(yíng)鹽田網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app開發(fā)定制,鹽田h5微信平臺(tái)小程序開發(fā)搭建,鹽田網(wǎng)站營(yíng)銷推廣歡迎鹽田等地區(qū)企業(yè)咨詢
git clone https://github.com/kuckboy1994/mp_canvas_drawer
想在手機(jī)上使用配置自己的 appid 即可。
編譯模式中已經(jīng)為你配置好比較常用的兩種模式：
普通繪制，繪制單張分享圖。
多圖繪制，連續(xù)繪制分享圖
左側(cè)是 canvasdrawer 繪制的，右側(cè)是UI給的圖
git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地
把 components 中的 canvasdrawer 拷貝到自己項(xiàng)目下。
在使用頁面注冊(cè)組件
重慶分公司
重慶分公司
{
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
}
}在頁面 **.wxml 文件中加入如下代碼
painting 是需要傳入的 json。 getImage 方法是繪圖完成之后的回調(diào)函數(shù)，在 event.detail 中返回繪制完成的圖片地址。
當(dāng)前栗子中的 painting 簡(jiǎn)單展示一下。詳細(xì)配置請(qǐng)看 API
painting（點(diǎn)擊展開）
對(duì)象結(jié)構(gòu)一覽
數(shù)據(jù)對(duì)象的第一層需要三個(gè)參數(shù): width、height、mode、views。配置中所有的數(shù)字都是沒有單位的。這就意味著 canvas 繪制的是一個(gè)比例圖。具體顯示的大小直接把返回的圖片路徑放置到 image 標(biāo)簽中即可。
mode 可選值有 same, 默認(rèn)值為空，常規(guī)下盡量不要使用。如要使用請(qǐng)看 Q&A的第1點(diǎn)。
當(dāng)前可以繪制3種類型的配置: image、text、rect。配置的屬性基本上使用的都是 css 的駝峰名稱，還是比較好理解的。
| 屬性 | 含義 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| url | 繪制的圖片地址，可以是本地圖片，如：/images/1.jpeg | ||
| top | 左上角距離畫板頂部的距離 | ||
| left | 左上角距離畫板左側(cè)的距離 | ||
| width | 要畫多寬 | 0 | |
| height | 要畫多高 | 0 |
| 屬性 | 含義 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| content | 繪制文本 | ''（空字符串） | |
| color | 顏色 | black | |
| fontSize | 字體大小 | 16 | |
| textAlign | 文字對(duì)齊方式 | left | center、right |
| lineHeight | 行高，只有在多行文本中才有用 | 20 | |
| top | 文本左上角距離畫板頂部的距離 | 0 | |
| left | 文本左上角距離畫板左側(cè)的距離 | 0 | |
| breakWord | 是否需要換行 | false | true |
| MaxLineNumber | 最大行數(shù)，只有設(shè)置 breakWord: true ，當(dāng)前屬性才有效，超出行數(shù)內(nèi)容的顯示為... | 2 | |
| width | 和 MaxLineNumber 屬性配套使用，width 就是達(dá)到換行的寬度 | ||
| bolder | 是否加粗 | false | true |
| textDecoration | 顯示中劃線、下劃線效果 | none | underline（下劃線）、line-through（中劃線） |
| 屬性 | 含義 | 默認(rèn)值 | 可選值 |
|---|---|---|---|
| background | 背景顏色 | black | |
| top | 左上角距離畫板頂部的距離 | ||
| left | 左上角距離畫板左側(cè)的距離 | ||
| width | 要畫多寬 | 0 | |
| height | 要畫多高 | 0 |
最佳實(shí)踐
繪制操作的時(shí)候最好 鎖住屏幕 ，例如在點(diǎn)擊繪制的時(shí)候
wx.showLoading({
title: '繪制分享圖片中',
mask: true
})繪制完成之后
wx.hideLoading()
具體可以參考項(xiàng)目下的 /pages/multiple
[mpvue] 由于 canvasdrawer 不主動(dòng)呈現(xiàn)繪制內(nèi)容，而是交給調(diào)用者去使用 image 來展示，所以在mpvue更新數(shù)據(jù)就會(huì)render整個(gè)組件的，之后 canvasdrawer 又會(huì)重新被渲染，導(dǎo)致無限循環(huán)，所以默認(rèn)情況下我把代碼改為，傳入的 painting 和之前的一樣的話，組件就不渲染了。只有出現(xiàn)差異的內(nèi)容才會(huì)更新（觸發(fā)回調(diào)），這種個(gè)人認(rèn)為還是可以接受的。 增加頂層參數(shù) mode, mode: 'same' 為可以繪制同樣的內(nèi)容。在 mpvue 模式下勿用。
二維碼和小程序碼如何繪制？
二維碼和小程序碼可以通過調(diào)用微信官方的接口產(chǎn)生，需要后端配合。
然后走 type: image 類型進(jìn)行繪制即可。
繪制流程相關(guān)
views 數(shù)組中的順序代表繪畫的先后順序，會(huì)有覆蓋的現(xiàn)象。請(qǐng)各位使用者注意。
如何實(shí)現(xiàn)圓形頭像？
由于完成一些效果，例如： 文字下劃線 等。必須要使用微信小程序 rect 相關(guān)的接口，和 clip 接口感覺相處的不好（存在bug）?？梢圆榭?nbsp;微信小程序社區(qū)的帖子。
so，提供一種解決方式：使用一張中間鏤空的圖片蓋在頭像上。
canvas drawer 組件為什么不直接顯示canvas畫板和其內(nèi)容呢？
考慮到大部分場(chǎng)景，我們都是用來把圖片保存到本地，或用以展示。
保存到本地，返回臨時(shí)文件給調(diào)用者一定是最佳的解決方式。
展示，轉(zhuǎn)化成圖片之后，就可以使用 image 基礎(chǔ)組件的所有顯示模式了，還能設(shè)置寬高。
上述內(nèi)容就是使用canvas怎么繪制一個(gè)圖片小程序，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
