微信小程序canvas超出屏幕實現左右滑動的方法

要實現下圖這種關於canvas的滑動

跟所有人的想法相同,第一次使用canvas繪製的折線圖,我選擇了放在scroll-view 內,在開發者工具上是可以實現滑動的,但是在真機上面發現不能滑動.原因是canvas層級是最高的,後來發現官方文檔已經明確說明

經過無數種方法的測試,.始終會存在一個問題.就是滑動不流暢.比如通過綁定canvas的時間,獲取移動的距離,從而改變canvas的位置, 這種方法是極不流暢的,非常的生硬.

下面我將給出兩個解決辦法,一個方法是目前最好的解決辦法,一個方法是一點僵硬的解決方法,但是兩個方法應該就是目前唯一能解決這個問題的辦法.大家可以結合使用場景來選擇其中的一個辦法.

兩個方法能必須用同樣的一個標籤,那就是 scroll-view標籤.目前爲止滑動效果最流暢的就是scroll-view 和swiper標籤,所以我們會發現在很多切換和滑動的場景都會用到這兩個標籤.

方法1.將繪製出的canvas 保存爲本地路徑的一個img 路徑.然後將圖片放到 scroll-view 裏面,進行滑動.親測,滑動最流暢.

每個場景不同,繪製canvas的方法我就在這裏不作累述.本博客的其他文章也會給出兩種情況的繪製方法.

html:

<scroll-view class="temp_day_box" scroll-x>
  <view class="canvas_height">
     <image class="canvas_img" src='{{canvasSaveimg}}'></image>
  </view>
</scroll-view>
<canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 

css:

.canvasHigh {
    width: 2250rpx;
    height: 270rpx;
    transform: translateX(-200%);
}
.canvas_img{
    width: 2250rpx;
    height: 270rpx;
}

這裏的canvasHigh的css屬性可以用很多其他的方式隱藏,但是這裏注意的是一定不能用display:none;或者 標籤裏面加hidden,wx:if屬性,這樣保存下來的圖片路徑是不會顯示出來的.具體原因不詳.

JS:

//前面的寫法這裏就不再編寫,可以查看相關文檔和官方api
ctx.draw();
wx.canvasToTempFilePath({
    canvasId: 'canvasWeather',//canvasId和標籤裏面的id對應
    success: (res) => {
        var shareTempFilePath = res.tempFilePath;
        _this.setData({
            //將獲取到的圖片臨時路徑set到canvasSaveimg中
            canvasSaveimg:shareTempFilePath
        })
    }
}) 

方法2.在scroll-view標籤中綁定一個滾動時觸發的事件,這裏就不需要保存爲圖片,但是動畫效果有點小小的僵硬.

html:

<scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'> 
  <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'>
    <canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 
  </view>
</scroll-view>

JS:

scrollCanvas: function(e) {
    console.log(e);
    var canvasLen = e.detail.scrollLeft;
    this.setData({
        canvasLen: canvasLen
    })
}

大家兩種方式都可以試一下,選取一個最適合自己場景的方法.!