微信小游戏截图的若干问题

最新推荐文章于 2023-08-05 11:15:00 发布

weixin_34126557

最新推荐文章于 2023-08-05 11:15:00 发布

阅读量495

点赞数

文章标签：游戏开发工具 python

原文链接：https://my.oschina.net/ForeverZi/blog/1924137

版权

2019独角兽企业重金招聘Python工程师标准>>>

微信小游戏截图的若干问题

[TOC]

坐标系转换

在使用微信的截图api的时候，使用的是Canvas坐标系，从左上角起，x轴向右，y轴向下。需要使用如下方法转化：

function getWXPos(worldPos){
    const ccCanvas = cc.find('Canvas');
    const xscale = worldPos.x / ccCanvas.width;
    const yscale = 1 - worldPos.y / ccCanvas.height;
    // canvas是上屏canvas，在adapter中被设置成了全局对象
    return cc.v2(canvas.width * xscale, canvas.height * yscale);
}

微信canvas的大小也和我们的设计分辨率不一致，因此我们也需要转换：

function getWXSize(size){
    const ccCanvas = cc.find('Canvas');
    const width = size.width / ccCanvas.width * canvas.width;
    const height = size.height / ccCanvas.height * canvas.height;
    return cc.size(width, height);
}

截图模糊

在Canvas中截图指定的长宽是在Canvas中的逻辑像素大小，而destWidth、destHeight设置的大小是物理像素点，因此在导出时，如果二者相同，导出的图片可能会极度模糊。解决办法就是导出尺寸设置为逻辑尺寸和pixelRatio的乘积，导出的便是在当前设备上占用的物理像素大小。代码如下：

function getScreenShotPath(ltWorldPos, size, destSize) {
    const pos = getWXPos(ltWorldPos);
    const size = getWXSize(size);
    let sysInfo = wx.getSystemInfoSync();
    if (!destSize) {
        destSize = cc.size(size.width * sysInfo.pixelRatio, size.height * sysInfo.pixelRatio);
    }
    const fileConfig = {
        x: pos.x,
        y: pos.y,
        width: size.width,
        height: size.height,
        destWidth: destSize.width,
        destHeight: destSize.height
    }
    let tempFilePath = canvas.toTempFilePathSync(fileConfig);
    return tempFilePath;
}