Question

我知道以前其他人也曾问过同样的问题，但是那是很久以前的事，API更改了，他们没有解决我的问题。

这是我的问题：

我对视网膜显示有疑问，让我们以iPhone 6为例。屏幕尺寸为375x667，设备像素比例为2，这意味着物理像素为750x1334，而CSS像素为375x667。

如果要使用全屏画布，通常要做的是将画布大小设置为750x1334，然后将画布的实际显示大小设置为375x667。

这是我在pixi.js（v5.1.1）中所做的事情：


let app = new Application({
    width: 375,
    height: 667,
    antialiasing: true,
    resolution: 2,
    autoDensity: true,
})

我设置了resolution : 2和autoDensity : true，但是当我添加大小为750x1334的sprite时，它仅显示sprite的四分之一（大小加倍）。似乎autoDensity无效。

我现在正在做的是用scale(0.5)设置整个舞台：

app.stage.scale.set(0.5);

它暂时解决了我的问题，但是我觉得这不是当前的方法。这种事情不应该使用规模。

那我该怎么办？

Answer 1

使用CSS以CSS单位设置画布大小，并根据设备的像素比率使用适当的尺寸初始化渲染器。

let canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let app = new Application({
    width:window.innerWidth*window.devicePixelRatio,
    height:window.innerHeight*window.devicePixelRatio,
    antialiasing: true,
    view:canvas
});

pixi.js视网膜显示尺寸翻倍

1 个答案: