android - 触摸屏幕时图像像素化

Question

我正在 Android 上用 HTML/JS 构建一个小游戏。我在 HTC Desire (Android 2.2) 上遇到问题。当我触摸屏幕时，所有图像看起来都是像素化的，而当触摸结束时，它们又恢复了像素化。

截图如下:

右边是触摸屏幕的时候。有人可以帮我找出导致此问题的原因吗？

注意事项:

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

Answer 1

据我所知，“像素化”行为是针对滚动进行的优化(在 Froyo 及更高版本中)。如果渲染得到简化，它可以使滚动动画之类的东西需要更少的处理。

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

既然你说你在制作游戏，那么我可能有一个解决方法。我希望您的游戏不需要滚动(一个全屏)，因此不需要滚动优化。

我用 WebView 做了一个简单的测试。正如您所提到的，在点击时，渲染得到简化，并且看起来有点不对劲。然后一旦点击了某些东西(WebView 知道不再发生滚动)，一切就会恢复正常。

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

因为对于这个例子来说它是最简单的，所以我选择检测“MotionEvent.ACTION_UP”事件，当它完成时，我先发送一个 down，这样它就可以模拟真正的点击。您当然可以在 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);
}