当屏幕被触摸时，图像被像素化 [英] Images get pixelated when the screen is touched

问题描述

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

I'm building a little game in HTML/JS on Android. I'm running into a problem on my HTC Desire (Android 2.2). When I touch the screen, all the images look pixelated and they get un-pixelated when the touch ends.

这是屏幕截图：

>

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

On the right it's when the screen is being touched. Can someone help me figure out what's causing this issue?

注意：

• 如果屏幕未被触摸，在动画期间没有问题


• 我的LG 540 Android 2.1没有此问题

推荐答案

据我所知，像素化的行为是滚动的优化（在Froyo及以上）。如果渲染是简化的，它使事情像fling滚动动画需要较少的处理。

As far as I can tell, that "pixelated" behavior is an optimization made for scrolling (in Froyo and above). If the rendering is simplified, it makes things like the fling scroll animation require less processing.

如果你需要完整的浏览器功能，我不知道你可以帮助它。

If you need full browser functionality, I'm not sure you can help it much.

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

Since you've said you're making a game, however, I might have a workaround. I'm hoping your game doesn't need scroll (one full screen), so the scrolling optimization isn't necessary.

我做了一个简单的测试与WebView。点击，如你所说，渲染被简化，事情看起来有点偏差。

I've done a simple test with a WebView. On tap, as you mentioned, the rendering gets simplified, and things look a little off. Then once something is clicked (the WebView knows no more scrolling is taking place), things go back to normal.

我修改了我的布局通过替换一个WebView，用一个FrameLayout 。 FrameLayout包含WebView和一个不可见的按钮（在上面）。此按钮捕获所有触摸事件。然后，我选择性地选择WebView应该需要什么类型的事件，并将它们传递给WebView。如果触摸和触摸靠近在一起，没有任何移动，没有滚动的理由，所以我没有看到任何像素化的行为。

I modified my Layout by replacing a WebView, with a FrameLayout. The FrameLayout contains the WebView and an invisible Button (on top). This Button grabs all the touch events. Then, I selectively choose what types of events the WebView should need, and pass them to the WebView. If a touch down and touch up happen close together, with no movement in betweeen, there's no reason for scrolling, so I haven't seen any of that "pixelated" behavior.

因为这个例子最简单，我选择检测MotionEvent.ACTION_UP事件，当它完成后，我首先发送一个，以模拟真正的点击。你当然可以触发ACTION_DOWN，但是如果用户滑动或者某些东西，你会得到多于一个，我想保持这里的逻辑简单。您可以自定义为您认为合适，并且可能有足够的工作，甚至在某些情况下启用滚动。我希望下面的代码是足够的继承我认为工作。

Because it was simplest for this example, I've chosen to detect the "MotionEvent.ACTION_UP" event, and when it's complete, I send a down first, so that it simulates a real click. You could certainly trigger on ACTION_DOWN, but you'll get more than one of those if the user swipes or something, and I wanted to keep the logic here simple. You can customize as you see fit, and probably with enough work, even enable scrolling in some cases. I hope the code below is enough to relay what I think works.

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布局...它未经测试，但似乎应该工作：

If you don't want to edit PhoneGap source, you might be able to do something like the following to change the PhoneGap layout... It's untested, but seems like it should work:

@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);
}

这篇关于当屏幕被触摸时，图像被像素化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！