uni-app踩坑之canvas繪製不顯示

uni-app踩坑之canvas繪製不顯示

問題描述:

  • 如下圖所示,我用canvasShow來控制 canvas相關dom的隱藏與出現
  • canvasShow的默認值爲false,當canvasShow的值第一次變爲true時,繪製的矩形並不能出現;之後就能正常出現了。

在這裏插入圖片描述
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qbAanC5y-1583837839876)(en-resource://database/4678:1)]
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Ihx2haPS-1583837839878)(en-resource://database/4680:1)]

問題分析:

  1. 在canvasShow第一次變爲true之前,dom是這樣的
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qLqCzMKK-1583837839879)(en-resource://database/4682:1)]
    可以看出,canvas的width height都爲0,而這個時候canvas的父級是被隱藏的;經過測試我們可以得出結論:uni-app中canvas的width height的值依賴於父元素的寬高。

  2. canvasShow第一次變爲true,dom是這樣的
    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SQA65UiP-1583837839880)(en-resource://database/4684:1)]
    這個時候,由於父元素出現了,所以canvas的寬高也就有了。但是,canvas繪製的矩形並不能顯示

  3. 之後canvasShow再次變爲true,canvas都能正常顯示繪製的矩形。因爲經過第一次canvasShow變爲true後 canvas dom的width height就一直存在了。

問題解決

將繪製方法寫在異步方法中
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NX9i6eZD-1583837839881)(en-resource://database/4686:0)]

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章