要实现下图这种关于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:
//前面的写法这里就不再编写,可以查看相关文档和官方apictx.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 })}大家两种方式都可以试一下,选取一个最适合自己场景的方法.!
