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

前端之家收集整理的这篇文章主要介绍了javascript – 将View的触摸位置转换为WebView的HTML屏幕位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个WebView,它在assets文件夹中显示一个本地 HTML页面. WebView是Activity中较大布局的一部分.我试图允许用户将文本从EditText小部件拖动到WebView中的输入元素.除了将拖动侦听器接收的屏幕坐标转换为document.elementFromPoint使用的屏幕坐标外,一切都很好.他们不匹配.它会继续将文本放入输入框中,这些输入框比用户手指更低.任何帮助,将不胜感激.警告:我的 javascript知识非常可怜.

基本流程:

> WebView的onDrag事件捕获ACTION_DROP事件.
>事件的x,y位置传递给Javascript函数
> 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>

解决方法

弄清楚了.是否使转换变得更加复杂. Android的WebView和WebPage都有自己的基于可见视图端口大小的坐标系.是的,都报告不同大小的视图端口.即使两个视图端口都可以滚动,也不需要包含那些滚动的更改.简单的公式:

DE = DragEvent
WV = WebView

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

我的代码现在看起来如何:

在活动中:

private class OnWebViewDragListener implements OnDragListener {
    public boolean onDrag(View v," + y + "," + wv.getHeight()
            + "," + wv.getWidth() + ")");
}

Javascript功能

<script type="text/javascript">
function dropText(text,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>
原文链接:https://www.f2er.com/js/240656.html

猜你在找的JavaScript相关文章