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

【问题标题】：pixi.js retina display doubled in sizepixi.js 视网膜显示尺寸翻倍
【发布时间】：2019-08-22 10:16:30
【问题描述】：

我知道以前有人问过同样的问题，但那是很久以前的事了，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的精灵时，它只显示了四分之一的精灵（大小增加了一倍）。 autoDensity 似乎不起作用。

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

app.stage.scale.set(0.5);

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

那我该怎么办？

【问题讨论】：

标签： pixi.js

【解决方案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
});

【讨论】：