将 View 的触摸位置转换为 WebView 的 HTML 屏幕位置

Question

我有一个WebView，它在资产文件夹中显示一个本地 HTML 页面。 WebView 是 Activity 中较大布局的一部分。我试图让用户将文本从EditText 小部件拖到WebView 中的输入元素。除了将拖动侦听器接收到的屏幕坐标转换为document.elementFromPoint 使用的屏幕坐标外，一切都很好。他们不匹配。它会继续将文本放入输入框中，这些输入框位于用户手指下方。任何帮助，将不胜感激。警告：我的 javascript 知识太可怜了。

基本流程：

1. WebView 的 onDrag 事件捕获 ACTION_DROP 事件。
2. 事件的 x、y 位置被传递给 Javascript 函数
3. Javascript函数根据点查找元素并更新值

在我的活动中：

private class OnWebViewDragListener implements OnDragListener {
    public boolean onDrag(View v, DragEvent event) {
        switch (event.getAction()) {
            case DragEvent.ACTION_DROP:
                String dropText = event.getClipData().getItemAt(0).getText().toString();
                mJavaScript._dropText(mWebView, dropText, event.getX(), event.getY());
                return true;

            default:
                break;
        }

        return false;
    }
}

Javascript 包装器：

public void _dropText(WebView wv, String text, float x, float y) {
    wv.loadUrl("javascript:dropText('" + text + "', " + x + ", " + y + ")");
}

Javascript 函数：

<script type="text/javascript">
function dropText(text, x, y) {
    var elem = document.elementFromPoint(x, y);

    if (elem.tagName == "INPUT") {
        elem.value = text;
    }
}
</script>

Answer 1

想通了。使转换变得比它需要的更复杂。 Android 的 WebView 和 WebPage 都有基于其可见视口大小的自己的坐标系。是的，两者都报告不同大小的视口。即使两个视口都可以滚动，也不需要包含那些滚动的更改。简单的公式：

DE = DragEvent
WV = Web 视图

x = DE.getX() * (window.innerWidth / WV.getWidth());
y = DE.getY() * (window.innerHeight / WV.getHeight());

我的代码现在的样子：

活动中：

private class OnWebViewDragListener implements OnDragListener {
    public boolean onDrag(View v, DragEvent event) {
        switch (event.getAction()) {
            case DragEvent.ACTION_DROP:
                String dropText = event.getClipData().getItemAt(0).getText().toString();
                mJavaScript._dropText(mWebView, dropText, event.getX(), event.getY());
                return true;

            default:
                break;
        }

        return false;
    }
}

Javascript 包装器：

public void _dropText(WebView wv, String text, float x, float y) {
    wv.loadUrl("javascript:dropText('" + text + "', " + x + ", " + y + ", " + wv.getHeight()
            + ", " + wv.getWidth() + ")");
}

Javascript 函数：

<script type="text/javascript">
function dropText(text, x, y, height, width) {
    x *= (window.innerWidth / width);
    y *= (window.innerHeight / height);

    var elem = document.elementFromPoint(x, y);

    if (elem.tagName == "INPUT") {
        elem.value = text;
    }
}
</script>