Изменение размера контекста WebGL в iOS
В iOS WebGL есть ошибка, которую можно воспроизвести с помощью следующего HTML:
<html>
<head>
<title>Resize WebGL</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<input type="button" id="resizeButton" value="resize"><br>
<canvas id="chart" style="width:100px; height:100px; border:1px solid #000;">
<script>
var canvas = document.getElementById('chart');
var gl = null;
function resetGL() {
var devicePixelRatio = 2; // Warning: overrides window.devicePixelRatio
var w = Math.floor(canvas.clientWidth * devicePixelRatio);
var h = Math.floor(canvas.clientHeight * devicePixelRatio);
if (canvas.width != w || canvas.height != h) {
console.log("resetGL: Setting canvas.width=" + w + " canvas.height=" + h);
canvas.width = w;
canvas.height = h;
}
if (!gl || gl.isContextLost()) {
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
console.log("Allocated WebGL context: " + gl);
}
}
function redraw() {
requestAnimationFrame(function () {
resetGL();
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(1, 1, 0.8, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
});
}
var bToggle = false;
function resize() {
bToggle = !bToggle;
var s = bToggle ? '50px' : '100px';
console.log("");
console.log("Button: Setting canvas.style.width=" + s + " canvas.style.height=" + s);
canvas.style.width = s;
canvas.style.height = s;
redraw();
}
var button = document.getElementById('resizeButton');
button.addEventListener("click", resize);
redraw();
</script>
</canvas>
<br>
Press "resize", and iOS stomps on this text!
</body>
</html>
Я загрузил этот HTML- код на http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html чтобы вы могли легко запустить его.
Для людей, у которых нет устройства iOS, я загрузил скриншоты своего iPad до и после нажатия кнопки, которые показывают ошибку в iOS.
Этот код работает в браузерах настольных ПК и Android, но в iOS измененное окно WebGL выходит за пределы Canvas и топтается за пределами холста. Это ошибка в iOS. Ошибка исчезнет, если devicePixelRatio установлен на 1, но я хочу использовать более высокое разрешение экранов сетчатки.
Как я могу изменить размер холста WebGL высокого разрешения в iOS?
1 ответ
Я нашел обходной путь. Приложение должно поместить элемент WebGL