微信小程序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
    })
}

大家两种方式都可以试一下,选取一个最适合自己场景的方法.!