javascript - 如何知道Android中的webview是否在Canvas上绘图

Question

首先，我的应用程序是一个混合应用程序，我可以通过 Cordova 插件了解 WebView 事件和操作到 native 。在 WebView 中，我们启用了使用 GestureDetector 滑动到下一页/上一页的功能。

问题是当我在 webview 上画一条直线时，它会滑动到下一页。我不想滑动以获取下一页。因此，我需要在 Canvas 上的 webview isDrawing() 或 webview isZoomed() 期间禁用滑动。

这是我的 CustomWebView，

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;

import org.apache.cordova.engine.SystemWebView;



public class CustomWebView extends SystemWebView {

    private GestureDetector gestureDetector;



    public CustomWebView(Context context) {
        super(context);
    }

    public CustomWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /*
     * @see android.webkit.WebView#onScrollChanged(int, int, int, int)
     */
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
    }

    /*
     * @see android.webkit.WebView#onTouchEvent(android.view.MotionEvent)
     */
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return gestureDetector.onTouchEvent(ev) || super.onTouchEvent(ev);
    }

    public void setGestureDetector(GestureDetector gestureDetector) {
        this.gestureDetector = gestureDetector;
    }



    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    @SuppressWarnings("deprecation")
    public boolean isZoomed () {
        boolean result = false;

        int contentHeight = getContentHeight();
        int viewHeight = getHeight();

        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN_MR1 ) {
            float scale = getScale();
            int temp = (int)(((float)viewHeight / (float)contentHeight) * 100);

            if (temp < (int)(scale * 100)) {
                result = true;
            }
        } else {
            float scale = getScale();
            int temp = (int)(((float)viewHeight / (float)contentHeight) * 100);

            if (temp < (int)(scale * 100)) {
                result = true;
            }
        }

        return result;
    }
}

这是我的手势检测器，

private class CustomeGestureDetector extends GestureDetector.SimpleOnGestureListener {



        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {

            if(e1 == null || e2 == null) return false;
            if(e1.getPointerCount() > 1 || e2.getPointerCount() > 1) return false;
            else {
                try { // right to left swipe .. go to next page
                    if(e1.getX() - e2.getX() > 250 && Math.abs(velocityX) > 800) {

                                slideToLeft();

                                MoveNext();

                        }

                        return true;
                    } //left to right swipe .. go to prev page
                    else if (e2.getX() - e1.getX() > 250 && Math.abs(velocityX) > 800) {

                                slideToRight();

                                MovePrevious();


                        return true;
                    } 
                } catch (Exception e)
                {
                    e.printStackTrace();
                }
                return false;
            }
        }
    }

任何帮助将不胜感激。谢谢!

Answer 1

您可以listen to touch events on the html canvas并通知GestureDetector“暂停”。

为此，您需要打开a javascript interface在 WebView 上，类似:

public class CustomWebView extends SystemWebView {
    private CustomeGestureDetector gestureDetector;

    public CustomWebView(Context context) {
        super(context);
        this.addJavascriptInterface(this, "Android");
    }

    public CustomWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.addJavascriptInterface(this, "Android");
    }

    ...

    @JavascriptInterface
    public void onCanvasTouchStart() {
        this.gestureDetector.pause();
    }

    @JavascriptInterface
    public void onCanvasTouchEnd() {
        this.gestureDetector.resume();
    }
}

private class CustomeGestureDetector extends GestureDetector.SimpleOnGestureListener {
    private AtomicBoolean paused = new AtomicBoolean(false);

    public void pause() {
        this.paused.set(true);
    }

    public void resume() {
        this.paused.set(false);
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        if (this.paused.get()) {
            return;
        }

        ...
    }
}

然后在 html/javascript 部分:

var canvas = document.getElementById("CANVAS_ID");
canvas.addEventListener("touchstart", function() { Android.onCanvasTouchStart(); });
canvas.addEventListener("touchend", function() { Android.onCanvasTouchEnd(); });

我还没有测试过这些，但总体思路应该可行。