如何使用javascript在HTML文件中动态绘制矩形？ Google Chrome扩展程序页面标尺具有相似的功能

Question

我想在HTML文件中的文本或段落上绘制矩形。我想在不使用canvas的情况下使用javascript实现此目的。也可以存在多个矩形以选择多个段落。有没有实现这种功能的库。

Click here to see the intended result

页面标尺链接在这里https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en-US

Answer 1

如果要突出显示纯p元素，则可以操纵段落的backgroundColor属性，但是必须确保它们显示为inline-block。

document.getElementById('bttn').addEventListener('click', highlight);    
function highlight() {
    var p = document.getElementById('target'); 
    p.style.backgroundColor = '#ff0000'; //change background color
}
 

<!--make sure the paragraph is displayed inline-block, or else the entire line  will be highlighted. -->

<p id="target" style="display:inline-block">This is a paragraph.</p>  
<p>This is another paragraph.</p>

<button id="bttn">Click here to highlight</button>

Answer 2

您可以使用绝对定位的div元素在网页上绘制一个矩形。当用户按下鼠标按钮（mousedown），移动鼠标（mousemove）和释放按钮（mouseup）时，您需要侦听事件。这是一个简单的示例：

const rectangle = document.createElement("div");
rectangle.style.position = "absolute";
rectangle.style.backgroundColor = "rgba(204,230,255, 0.7)";
rectangle.style.border = "1px dashed black";
document.body.appendChild(rectangle);

    let isDragged = false;
    let rectangleCoords = [];

    const clearRectangleCoords = () => {
        rectangleCoords = [];
    };

    const addFirstRectangleCoords = coords => {
        rectangleCoords[0] = coords;
    };

    const addSecondRectangleCoords = coords => {
        rectangleCoords[1] = coords;
    };

    const redrawRectangle = () => {
        const top = Math.min(rectangleCoords[0].y, rectangleCoords[1].y);
        const height = Math.max(rectangleCoords[0].y, rectangleCoords[1].y) - top;
        const left = Math.min(rectangleCoords[0].x, rectangleCoords[1].x);
        const width = Math.max(rectangleCoords[0].x, rectangleCoords[1].x) - left;
      rectangle.style.top = top + "px";
      rectangle.style.height = height + "px";
      rectangle.style.left = left + "px";
      rectangle.style.width = width + "px";
    };

    window.addEventListener("mousedown", e => {
        isDragged = true;
      clearRectangleCoords();
      addFirstRectangleCoords({x: e.pageX, y: e.pageY});
      addSecondRectangleCoords({x: e.pageX, y: e.pageY});
      redrawRectangle();
    });

    window.addEventListener("mousemove", e => {
        if (isDragged) {
        addSecondRectangleCoords({x: e.pageX, y: e.pageY});
        redrawRectangle();
      }
    });

    window.addEventListener("mouseup", e => {
        if (isDragged) {
        addSecondRectangleCoords({x: e.pageX, y: e.pageY});
        redrawRectangle();
            isDragged = false;
      }
    });

您可以使用JSFiddle上的代码进行播放>