如何使用 javascript 在 html 文件中动态绘制矩形？ Google chrome 扩展 Page Ruler 有类似的功能

Question

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

Click here to see the intended result

页面标尺 link 此处 https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en-US

Answer 1

如果您想突出显示纯 p 元素，您可以操纵段落的背景颜色属性，但您必须确保它们显示 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

上使用代码

如何使用 javascript 在 html 文件中动态绘制矩形？ Google chrome 扩展 Page Ruler 有类似的功能

How to draw a rectangle in a html file dynamically using javascript ? Google chrome extension Page Ruler have similar feature

javascript

shapes