小程序
小游戏
企业微信
微信支付
扫描小程序码分享
requestAnimationFrame 和 canvas 的 clip 一起时，会非常卡顿，
那如果想在小游戏中实现类似 scroll-view 这样的对象，只显示部分内容的裁剪效果，该怎么做呢
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
解决方案如下：
ctx.fillRect(x, y, width, height); // 遮罩层尺寸
ctx.globalCompositeOperation = "source-atop";
// 中间加显示内容
ctx.globalCompositeOperation = "source-over";
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
后来发现依旧不行。
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 也没能实现，怎么用小游戏搞个裁剪这么麻烦...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
解决方案如下：
ctx.fillRect(x, y, width, height); // 遮罩层尺寸
ctx.globalCompositeOperation = "source-atop";
// 中间加显示内容
ctx.globalCompositeOperation = "source-over";
后来发现依旧不行。
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 也没能实现，怎么用小游戏搞个裁剪这么麻烦...