微信小程序自定義組件使用canvas繪圖,無法繪製以及fail canvas is empty問題


情況2:自定義組件引用canvas繪製,空白;
原因:查看文檔,在自定義組件內需要手動傳入當前實例的this,否則canvas指向的this爲父組件所以無法找到正確canvas;
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjUwMDkzLzE1NzQ3NDA3NTc5NTUtNDRlZWU3MzYtNTU0Zi00YmIzLWE2YTktOWNiMWYxYmM2ZTFmLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=351&margin=[object Object]&name=image.png&originHeight=351&originWidth=885&size=39059&status=done&style=none&width=885)


情況3:自定義組件內,canvas繪製好了,但是canvasToTempFilePath報fail canvas is empty錯誤;
原因:同上,但是canvasToTempFilePath({}, this)添加this可能無法解決,因爲我使用的小程序框架是Taro,在 Taro 的頁面和組件類中,this 指向的是 Taro頁面或組件實例。
所以一般我們需要獲取 Taro的頁面和組件所對應的小程序原生頁面和組件實例,這個時候我們可以通過 this.$scope 訪問到它們;
所以最後寫成:

Taro.createCanvasContext("canvas-id", this.$scope);
Taro.canvasToTempFilePath({}, this.$scope);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章