Question

iOS WebGL有一个错误，可以使用以下HTML重现：

package com.gabesechan.android.reusable.location;
import com.google.android.gms.location.places.Place;
import com.google.android.gms.location.places.PlaceLikelihood;
import com.google.android.gms.location.places.PlaceLikelihoodBuffer;

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

public class PlaceTypeFilter {

    private Set<Integer> mAllowedTypes;
    private Set<Integer> mDisallowedTypes;

    public PlaceTypeFilter(int allowedTypes[], int disallowedTypes[]) {
        mAllowedTypes = new HashSet<>();
        for(int type : allowedTypes) {
            mAllowedTypes.add(type);
        }
        mDisallowedTypes = new HashSet<>();
        for(int type : disallowedTypes) {
            mDisallowedTypes.add(type);
        }
    }

    public  boolean hasMatchingType(Place place) {
        List<Integer> types = place.getPlaceTypes();
        for (int type : types) {
            if (mDisallowedTypes.contains(type)) {
                return false;
            }
        }
        for (int type : types) {
            if (mAllowedTypes.contains(type)) {
                return true;
            }
        }
        return false;
    }

    public List<PlaceLikelihood> filteredPlaces(PlaceLikelihoodBuffer places) {
        List<PlaceLikelihood> results = new ArrayList<>();
        for(PlaceLikelihood likelihood : places) {
            if(hasMatchingType(likelihood.getPlace())) {
                results.add(likelihood);
            }
        }
        return results;
    }

}

我已将此HTML上传到http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html，因此您可以轻松运行。

对于没有iOS设备的用户，我已经上传了我的iPad before和after的屏幕截图，按下按钮，显示了iOS中的错误。

此代码适用于桌面浏览器和Android，但在iOS中，调整大小的WebGL窗口超出了Canvas并踩踏画布外的东西。这是iOS中的一个错误。如果<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>设置为1，则该bug会消失，但我想使用更高分辨率的视网膜屏幕。

如何在iOS中调整高分辨率WebGL画布？

Answer 1

我找到了解决办法。应用程序应该放置WebGL＆lt; canvas＆gt; ＆lt; div＆gt;内的元素，并重新创建＆lt; canvas＆gt;元素每当＆lt; div＆gt;尺寸变化。此外，＆lt; canvas＆gt;应该没有边框，以避免在视网膜显示器中将GL窗口放置在画布中具有粗边框的另一个iOS错误。如果你想要一个边框，那么只需将边框放在＆lt; div＆gt;上。元件。

在iOS中调整WebGL上下文的大小

1 个答案: