Question

我正在Android上用HTML / JS构建一个小游戏。我在HTC Desire（Android 2.2）上遇到了问题。当我触摸屏幕时，所有图像看起来都是像素化的，并且当触摸结束时它们会变得非像素化。

以下是截图：

enter image description here

在右侧，触摸屏幕时。有人可以帮我找出造成这个问题的原因吗？

注意：

如果未触摸屏幕，动画期间不会出现问题
我的LG 540 Android 2.1上没有这个问题
看来图像在触摸时会获得有限数量的颜色
我正在使用Phonegap

Answer 1

据我所知，“像素化”行为是针对滚动进行的优化（在Froyo及以上版本中）。如果渲染得到简化，它会使得像滚动动画这样的东西需要较少的处理。

如果您需要完整的浏览器功能，我不确定您可以提供多少帮助。

但是，既然你说你正在制作游戏，我可能会有一个解决方法。我希望你的游戏不需要滚动（一个全屏），所以不需要滚动优化。

我用WebView做了一个简单的测试。如你所述，点击时，渲染变得简单，事情看起来有些偏差。然后，一旦点击某些内容（WebView知道不再进行滚动），事情就会恢复正常。

我通过使用FrameLayout替换WebView来修改我的布局。 FrameLayout包含WebView和一个不可见的Button（在顶部）。此按钮可以抓取所有触摸事件。然后，我有选择地选择WebView应该需要的事件类型，并将它们传递给WebView。如果触地和触摸发生在一起，没有任何移动，没有理由滚动，所以我没有看到任何“像素化”的行为。

因为这个例子最简单，所以我选择检测“MotionEvent.ACTION_UP”事件，当它完成时，我首先发送一个，然后它模拟真正的点击。你当然可以在ACTION_DOWN上触发，但是如果用户滑动或者什么，你将获得不止一个，我想保持逻辑简单。您可以根据需要自定义，也可以通过足够的工作进行自定义，甚至可以在某些情况下启用滚动功能。我希望下面的代码足以传达我认为有用的东西。

WebView wv = new WebView(this);
View dummyView = new Button(this);
dummyView.setBackgroundColor(0x00000000);
dummyView.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            MotionEvent down = MotionEvent.obtain(100, 100,
                MotionEvent.ACTION_DOWN, event.getX(),
                event.getY(), 0);
            wv.onTouchEvent(down);
            wv.onTouchEvent(event);
        }
        return false;
    }
});
FrameLayout fl = new FrameLayout(this);
fl.addView(wv);
fl.addView(dummyView);
topLayout.addView(fl);

编辑：如果您不想编辑PhoneGap源代码，您可以执行以下操作来更改PhoneGap布局...它未经测试，但似乎应该可以工作：

@Override
public void onCreate(Bundle arg0) {
    super.onCreate(arg0);
    super.loadUrl("file:///android_asset/www/index.html");
    // Get the "root" view from PhoneGap
    LinearLayout droidGapRoot = super.root;
    // Create a new "root" that we can use.
    final LinearLayout newRoot = new LinearLayout(this);
    for (int i = 0; i < droidGapRoot.getChildCount(); i++) {
        // Move all views from phoneGap's LinearLayout to ours.
        View moveMe = droidGapRoot.getChildAt(i);
        droidGapRoot.removeView(moveMe);
        newRoot.addView(moveMe);
    }
    // Create an invisible button to overlay all other views, and pass
    // clicks through.
    View dummyView = new Button(this);
    dummyView.setBackgroundColor(0x00000000);
    dummyView.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            // Only pass "UP" events to the specific view we care about, but
            // be sure to simulate a valid "DOWN" press first, so that the
            // click makes sense.
            if (event.getAction() == MotionEvent.ACTION_UP) {
                MotionEvent down = MotionEvent.obtain(100, 100,
                        MotionEvent.ACTION_DOWN, event.getX(),
                        event.getY(), 0);
                newRoot.onTouchEvent(down);
                newRoot.onTouchEvent(event);
            }
            return false;
        }
    });
    // Layer the views properly
    FrameLayout frameLayout = new FrameLayout(this);
    frameLayout.addView(newRoot);
    frameLayout.addView(dummyView);
    // Add our new customized layout back to the PhoneGap "root" view.
    droidGapRoot.addView(frameLayout);
}

Answer 2

我遇到了同样的问题。您可以尝试的一件事是将android：hardwareAccelerated =“true”添加到标记中的应用程序清单中。这为我解决了这个问题，但是现在整个应用程序在我的设备上整体看起来有点像素化，所以这可能不是最好的解决方案。

Answer 3

如果您的图片在CSS中的大小与文件本身相同，请检查两次。它似乎有点相关。如果我拍摄大图像并使用依赖于设备的生成的CSS重新缩放它，我会看到问题所在。否则它不会显示或不可见。不确定最新的Androids是否已修复原始问题，但我仍然支持2.3，所以希望它有所帮助。

触摸屏幕时，图像会变得像素化

3 个答案: