收藏
回答

js canvas 自定义 scroll-view


新人求问:

   在小游戏模式下,需要实现类似小程序中的scroll-view组件,尤其是滚动功能的效果,请问有没有相关的方案?

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

1 个回答

  • addy
    addy
    2018-05-11

    可以参考下游戏引擎的UI组件实现,成熟的游戏引擎都有。实现原理:所有的图形都是绘制在canvas上,scroll-view容器只需要绘制部分区域,clip接口裁剪指定的区域,scroll利用touch事件来做。

    2018-05-11
    赞同
    回复 4
    • ༺Jedore༻
      ༺Jedore༻
      2018-05-13
      thank you 这个原理我明白了, 我也是准备把所有的图形都绘在离屏canvas上,但是有一个问题:由于行数太多而使整个scrollview的高度超出了整个屏幕的高度,发现超出部分截取出来都是空白的,因为wx.createCanvas创建的canvas是固定为屏幕的宽高的。这个问题有什么好的方案么,还是哪里不对?
      2018-05-13
      回复
    • addy
      addy
      2018-05-14回复༺Jedore༻
      没有必要绘制到离屏canvas上,在一个canvas上都可以实现。clip裁剪的出的rect作为scrollview的可视区域,不就好了吗?假设scrollview的height为1000, clip裁剪为500,剩下的500都是不可见的。touch事件来设置transform就可以了。
      2018-05-14
      回复
    • ༺Jedore༻
      ༺Jedore༻
      2018-05-18回复addy
      OK,get 新方法,感谢
      2018-05-18
      回复
    • 万达
      万达
      2018-06-13回复༺Jedore༻

      离屏是什么

      2018-06-13
      回复