Air StageWebView在安卓设备上显示的Leaflet地图图片有锯齿现象。

Question

我想在iOS和Android的Air移动应用程序中使用StageWebView类将一个Leaflet地图集成进去。不幸的是，地图图像的质量非常粗糙，很难看清街道名称。似乎有一些轻微的缩放问题。为测试目的，我使用了http://leafletjs.com/examples/quick-start-example.html上的Leaflet教程。

当在Android浏览器（Chrome）中查看时，图像看起来很好。以下是一些简单的代码来显示这个问题：

package  {
import flash.display.MovieClip;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.media.StageWebView;    
import flash.geom.Rectangle;
import flash.desktop.NativeApplication;
import flash.utils.setTimeout;
public class Main extends MovieClip{

    private var _stageWebView:StageWebView 
    public function Main() 
    {

        stage.align = StageAlign.TOP_LEFT;
        stage.scaleMode = StageScaleMode.NO_SCALE;
        setTimeout( init,  100 );

    }
    private function init():void {
        _stageWebView = new StageWebView();
        _stageWebView.stage = this.stage;
        _stageWebView.viewPort = new Rectangle( 0, 0, stage.stageHeight, stage.stageWidth );
        _stageWebView.loadURL( "http://leafletjs.com/examples/quick-start-example.html" );
    }
}

任何想法？可能与分辨率问题有关吗？

谢谢

- zantafio

---

移动应用程序应设置为无缩放（如有需要可以解释）。您是否已设置为无缩放？ stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; - moot

加油，伙计，这是一个悬赏问题...我一直做到现在为止... :) - zantafio

你会感到惊讶...你控制了视口缩放吗？ - moot

你的意思是在HTML/JS中吗？ - zantafio

Answer 1

您遇到的问题是渲染问题，您可以通过启用硬件加速（在支持的情况下强制使用GPU渲染）来避免。

从Android 3.0（API级别11）开始，Android 2D渲染管道支持硬件加速，这意味着在View的画布上执行的所有绘图操作都使用GPU。

因此，要强制使用GPU渲染，您可以：

1- 在应用程序的清单文件中启用硬件加速, 在应用程序元素的 android:hardwareAccelerated 属性中将其设置为true:

<android>
    <manifestAdditions> 
        <![CDATA[ 
            <manifest> 
                <application android:hardwareAccelerated="true"/> 
            </manifest> 
        ]]> 
    </manifestAdditions> 
</android>

这是一个完整的清单文件示例（我的测试浏览器应用程序.xml）：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<application xmlns="http://ns.adobe.com/air/application/19.0">
    <id>browser</id>
    <versionNumber>1.0.0</versionNumber>
    <versionLabel/>
    <filename>browser</filename>
    <description/>
    <name>browser</name>
    <copyright/>
    <initialWindow>
        <content>browser.swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <fullScreen>false</fullScreen>
        <renderMode>auto</renderMode>
        <autoOrients>true</autoOrients>
    </initialWindow>
    <icon/>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <android>
        <manifestAdditions>
        <![CDATA[
            <manifest>
                <uses-permission android:name="android.permission.INTERNET"/>
                <application android:hardwareAccelerated="true"/>
            </manifest>
        ]]>
        </manifestAdditions>
    </android>
</application>

然后你只需要发布你的AIR应用程序，你会得到类似这样的东西：

当我注释掉<application android:hardwareAccelerated="true"/>时，您可以看到结果：

2 - 你也可以在你的安卓设备的开发者选项中强制使用GPU渲染：

即使注释了<application android:hardwareAccelerated="true"/>，您仍然可以获得相同的结果：

就这些了！

希望能有所帮助。

- akmozo

---

好的。它完美地运行了。唯一的问题是，当我使用Flash Professional发布时，它会从...app.xml中删除该条目。 - zantafio

@zantafio 通常情况下，如果您不触及应用程序的权限部分，Flash 将不会影响您的编辑。当您编辑清单文件时，当然不应该打开发布对话框。我正在使用 Flash CS6，没有任何问题... - akmozo

我找到了问题。 在Air for Android设置->权限中有一个复选框，可以手动管理权限。不知何故之前从未见过。 再次感谢akmozo！ - zantafio

@zantafio 我知道这个，但我没有使用它，对我来说一切都很正常。祝你好运！ - akmozo

Answer 2

如果你将它改为使用nativeMode的new StageWebView(true)，这对我来说解决了问题，但是鼠标/触摸事件不起作用 :/

- colouredFunk

---

我猜你也还没有找到解决方案吧？我在考虑创建一个调用IE（全屏）的C#应用程序，然后通过某种过渡效果来隐藏应用切换... :| ...这真的不是理想的解决办法。 - colouredFunk

在移动平台上，useNative 是无用的： "移动平台只支持使用系统的网页引擎，所以在移动平台上忽略了 useNative。" - akmozo