收藏
回答

小游戏的裁剪(比如 滚动区间)怎么做

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小游戏 需求 clip 客户端 7.0.3 2.4.3

requestAnimationFrame 和 canvas 的 clip 一起时,会非常卡顿,

那如果想在小游戏中实现类似 scroll-view 这样的对象,只显示部分内容的裁剪效果,该怎么做呢


最后一次编辑于  02-11  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 永恒君
    永恒君
    02-18

    解决方案如下:


    ctx.fillRect(x, y, width, height);  // 遮罩层尺寸

    ctx.globalCompositeOperation = "source-atop";

    // 中间加显示内容

    ctx.globalCompositeOperation = "source-over";


    02-18
    赞同
    回复 1
    • 永恒君
      永恒君
      04-02

      后来发现依旧不行。


      globalCompositeOperation 方案需要有底色,

      而其他组件产生的底色也会影响本组件的裁剪效果。


      于是十分无奈了采用了绘制临时 canvas 的方案,

      其实很担心它的性能问题,但应该不会比 clip 方法更差了。


      const canvasClip = (ctx, x, y, width, height, func) => {

        const _canvas = wx.createCanvas();

        _canvas.width = width;

        _canvas.height = height;

        const _tempCtx = _canvas.getContext('2d');

        _tempCtx.translate(-x, -y);

        func && func(_tempCtx);

        ctx.drawImage(_canvas, x, y, width, height);

      }


      canvasClip(ctx, x, y, width, height, (_tempCtx) => {

        // 使用 _tempCtx 绘制内容

      });


      这地方想重复使用 _canvas 也没能实现,怎么用小游戏搞个裁剪这么麻烦...


      04-02
      回复