安靜的小智：我的canvas使用總結(jié)
發(fā)布時(shí)間：2018-04-08 10:51 所屬欄目：小程序開(kāi)發(fā)教程
上次在這里提問(wèn)如何將view及里面的內(nèi)容保存成一張圖片,看到大家的意見(jiàn)是使用畫(huà)布,在看了官方文檔后,發(fā)現(xiàn)的確可以實(shí)現(xiàn).非常感謝.
現(xiàn)在的畫(huà)布功能并不是很多,有許多不足之處.
這里只是把我在做的過(guò)程中遇到的問(wèn)題做個(gè)總結(jié).
1. 畫(huà)布里的api設(shè)置的x,y,width,height尺寸都是px,
所以我用prop設(shè)置了一個(gè)比例,屏幕的寬度/20
2. iphone6的750rpx=375px,所以當(dāng)畫(huà)布設(shè)置寬為375px,會(huì)充滿(mǎn)整個(gè)屏幕,但是保存下來(lái)的圖片再顯示會(huì)很模糊(分辨率太低).
當(dāng)畫(huà)布設(shè)置寬度大于375px(比如750px),保存下來(lái)的圖片會(huì)清晰很多,但畫(huà)布超過(guò)整個(gè)屏幕,會(huì)左右滑動(dòng).高度也是如此
我的解決辦法:我的項(xiàng)目中,畫(huà)布只是個(gè)過(guò)程,最終就是生成圖片,所以我設(shè)置了畫(huà)布寬度為750px,設(shè)置了hidden,直接在onReady方法中生成圖片,在image組件中顯示
3. 畫(huà)布中,同一個(gè)位置,后面畫(huà)的會(huì)覆蓋前面畫(huà)的,使用.clearRect(x,y,w,h)可以清除畫(huà)布中的以(x,y)起始,w寬,h高的矩形區(qū)域,之后可以繼續(xù)在上面畫(huà)
4. .drawImage(src,x,y,w,h)不會(huì)在模擬器中顯示圖片,只能在真機(jī)中顯示,非常坑的bug...
5. 保存畫(huà)布,獲取畫(huà)布的路徑
6. 保存到相冊(cè)
通過(guò)wx.previewImage預(yù)覽圖片,長(zhǎng)按后就可以'發(fā)送給朋友','收藏','保存圖片'.
7. .fillText(要顯示的字符串,x,y)這里的x,y不是要顯示的字符串的左上角,是左下角
寫(xiě)的粗糙,請(qǐng)多包涵.
再次感謝在微信小程序聯(lián)盟中助人的各位大神
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://www.kknew.com.cn/wxmini/doc/course/23135.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)： 點(diǎn)擊咨詢(xún)
