一个页面中有多个canvas绘制的图表,怎样可以实现滚动?
发布于 5 年前 作者 chaoduan 18582 次浏览 来自 问答

如题

9 回复

给canvas用fillRect填个背景

但是基础库1.4.0市场占有率还超级低

一个页面上从上到下依次用5个canvas绘制了五张折线图,一屏不能全部显示,想做出scrollview的滚动效果,请问如何实现?

明白了,这个思路好,谢谢指点~

不客气,互相帮助

是呀,所以还得做个兼容性的方案,只能等慢慢更新啦

还有个问题想请教一下,通过canvasToTempFilePath的输出的jpg图片透明的地方就会变成黑色么?因为jpg没有alpha通道的原因么?

明白你的意思了。这个目前可以实现,但是小程序基础库1.4.0之前IOS下有个bug,效果不好。具体实现方案如下。

  1. 由于scroll-view里面不能放canvas,反之canvas后滚动效果极差。但是scroll-view里面可以防止5个image组件

  2. 把canvas定位在屏幕外面,然后把canvas的图像导成图片,把图像给到scroll-view里面的image组件的src上就可以了。canvas方法:wx.canvasToTempFilePath。

  3. 但是这个方法的输出图片宽高需要是canvas的宽高的两倍才能在安卓手机上显示清晰的图像。记得设置输出宽高的时候写成2倍。

  4. 但是在IOS上,无论如何输出的图像都是模糊的。这个bug在基础库1.4.0得到了解决。

  5. 所以,这个效果不好,建议修改产品方案。我们当时和你的情况差不多,最后发现了这个坑,也只能修改方案了。

没明白什么意思,能在详细的描述一下问题吗?最好配上截图

回到顶部