收藏
回答

一个页面中有多个canvas绘制的图表,怎样可以实现滚动?

问题模块
API和组件

如题

最后一次编辑于  2017-07-13  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

9 个回答

  • A-floweR
    A-floweR
    2017-07-13

    不客气,互相帮助

    2017-07-13
    赞同
    回复
  • A-floweR
    A-floweR
    2017-07-13

    给canvas用fillRect填个背景

    2017-07-13
    赞同
    回复
  • 衣冠禽兽
    衣冠禽兽
    2017-07-13

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

    2017-07-13
    赞同
    回复
  • 衣冠禽兽
    衣冠禽兽
    2017-07-13

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

    2017-07-13
    赞同
    回复
  • A-floweR
    A-floweR
    2017-07-13

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

    2017-07-13
    赞同
    回复
  • 衣冠禽兽
    衣冠禽兽
    2017-07-13

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

    2017-07-13
    赞同
    回复
  • A-floweR
    A-floweR
    2017-07-13

    明白你的意思了。这个目前可以实现,但是小程序基础库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. 所以,这个效果不好,建议修改产品方案。我们当时和你的情况差不多,最后发现了这个坑,也只能修改方案了。

    2017-07-13
    赞同
    回复
  • 衣冠禽兽
    衣冠禽兽
    2017-07-13

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

    2017-07-13
    赞同
    回复
  • A-floweR
    A-floweR
    2017-07-13

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

    2017-07-13
    赞同
    回复