美文网首页
如何定位可编辑div光标的像素坐标

如何定位可编辑div光标的像素坐标

作者: 慕名君 | 来源:发表于2022-11-14 14:17 被阅读0次
在可编辑div里面,我们想要实现如下图一样的逻辑定位,就要知道光标在document或者父级的坐标。 test.jpg

我是利用添加一个node,然后拿到node的坐标进行处理。

  /**
     * 获取光标坐标
     */
    getCurrentPoint(){
        //先插入一个div 根据div来算坐标
        let div = DomUtils.createElement('div','currentPointDiv');
        this.insertNode(div);
        // div.innerText='111';
        div.style.display = 'inline'
        let point = EMRPoint.getAbsPoint(div);

        console.log('getCurrentPoint'+JSON.stringify(point));

        DomUtils.removeElementById("currentPointDiv");
        return point;

    }

  /**
     * 在鼠标位置插入一个节点元素
     * @param node 节点元素
     */
    insertNode(node){
        const range = this.getCurrentRange();
        range.insertNode(node);
    }

 /**
     * 获取当前坐标长度
     * @returns {null}
     */
    getCurrentRange(){
        let range = null;
        var doc = this.document.ownerDocument || this.document.document;
        var win = doc.defaultView || doc.parentWindow;
        var sel;

          // 谷歌、火狐
        if (typeof win.getSelection != "undefined") {
            sel = win.getSelection();
            // 选中的区域
            if (sel.rangeCount > 0) {
                range= win.getSelection().getRangeAt(0);
            }

        }
        return range;

    }



我把丢失的函数方法补充,自己去拼接就好了

    /**
     * 得到div在body中所在的绝对坐标
     * @param element
     * @returns {{x: number, y: number}}
     */
    static getAbsPoint(element)
    {
        let   x   =   element.offsetLeft,   y   =   element.offsetTop;
        while(element=element.offsetParent)
        {
            x   +=   element.offsetLeft;
            y   +=   element.offsetTop - element.scrollTop;
        }
        x = x-document.body.scrollLeft;//得到相对坐标
        y = y-document.body.scrollTop;
        return {x:x,y:y};
    }

相关文章

  • 如何定位可编辑div光标的像素坐标

    在可编辑div里面,我们想要实现如下图一样的逻辑定位,就要知道光标在document或者父级的坐标。 我是利用添加...

  • 坐标转换

    像素坐标转世界坐标的计算[https://www.jianshu.com/p/4566a1281066]

  • 相机标定原理总结和实现

    相机标定就是世界坐标到像素坐标的映射,这个世界坐标是我们人为去定义的,标定就是已知标定控制点的世界坐标和像素坐标我...

  • 像素坐标转世界坐标的计算

    原理 下图表示了小孔成像模型(图片及公式参考opencv官方资料) 世界坐标系:其坐标原点可视情况而定,可以表示空...

  • OpenGL从入门到放弃 #03 Create a Triang

      2D坐标与像素是有所区别的。2D坐标准确表示一个点的在2D空间的位置,而像素只是2D坐标的近似值(approx...

  • 2020-04-14 C作图与图形处理 2

    在图形方式下,屏幕的基本单位是像素。 像素可以看作是屏幕上能看到的一个“点”,用坐标进行定位。 坐标原点位于屏幕的...

  • div拖动改变大小

    问题 1:在div的边框时改变鼠标的样式问题 2:如何改变div的高度问题 3:div设置最大最小值 4:div四...

  • offsetLeft 和 translateX

    假如一个div定位之后通过translate做了移动: 使用offsetLeft和offsetTop获取坐标时由于...

  • 移动端一像素边框

    如何实现在移动端中显示一像素的边框 实现方案一:0.5像素 标准边框语法div{ border: 1px sol...

  • 关于firefox中可编辑div

    1.在可编辑的div中,若有绝对定位元素 和图标,点击时,周围会出现可缩放状态的边框,针对这种问题,可以修改布局 ...

网友评论

      本文标题:如何定位可编辑div光标的像素坐标

      本文链接:https://www.haomeiwen.com/subject/yrydxdtx.html