使用javascript在HTML上绘制矩形 [英] draw rectangle over html with javascript

问题描述

我知道这里有一个类似的问题，但是既不是问题也不是答案有任何代码。

我想要做的是将此功能移植到100％Javascript解决方案。现在我可以使用PHP在HTML内容的顶部绘制矩形。

我用CasperJS抓取一个网站，拍摄一张快照，将快照路径和一个json对象一起发送回PHP，该json对象包含用GD绘制一个矩形所需的所有信息库。这是有效的，但现在我想将该功能移植到Javascript中。

获取矩形信息的方式是使用 getBoundingClientRect（），它返回一个带有 top ， bottom ， height， width ， left 和右。



有没有办法将网站的HTML绘制为一个canvas元素，然后在该canvas元素上绘制一个Rectangle？
或者有什么方法可以在使用Javascript的HTML上绘制矩形？

希望我的问题已经够清楚了。

这是我用来获取坐标的函数我想绘制一个Rectangle的元素。

  function getListingRectangles（）{
 return Array.prototype.map.call（document.querySelectorAll（'。box' ），函数（e）{
返回e.getBoundingClientRect（）; 
}）; 
  

解决方案

您可以创建一个画布元素并将其放置在顶部的HTML页面：

  //用于绘制矩形的位置参数
 var x = 100; 
 var y = 150; 
 var width = 200; 
 var height = 150; 
 
 var canvas = document.createElement（'canvas'）; //创建一个画布元素
 //设置画布宽度/高度
 canvas.style.width ='100％'; 
 canvas.style.height ='100％'; 
 //设置画布绘制区域宽度/高度
 canvas.width = window.innerWidth; 
 canvas.height = window.innerHeight; 
 //位置画布
 canvas.style.position ='绝对'; 
 canvas.style.left = 0; 
 canvas.style.top = 0; 
 canvas.style.zIndex = 100000; 
 canvas.style.pointerEvents ='none'; //确保你可以点击'通过'画布
 document.body.appendChild（canvas）; //将canvas添加到body元素
 var context = canvas.getContext（'2d'）; 
 //绘制矩形
 context.rect（x，y，width，height）; 
 context.fillStyle ='yellow'; 
 context.fill（）; 
  

这段代码应该在图片左上角的[100,150]像素处添加一个黄色矩形页面。

I know there's a similar question here, but neither the question nor the answer have any code.

What I want to do, is to port this functionality to a 100% Javascript solution. Right now I'm able to draw a rectangle on top of HTML content using PHP.

I scrape a website with CasperJS, take a snapshot, send the snapshot path back to PHP along with a json object that contains all the information necessary to draw a rectangle with GD libraries. That works, but now I want to port that functionality into Javascript.

The way I'm getting the rectangle information is using getBoundingClientRect() that returns an object with top,bottom,height, width, left,and right.

Is there any way to "draw" the HTML of the website to a canvas element, and then draw a Rectangle on that canvas element? Or is there any way to draw a rectangle on top of the HTML using Javascript?

Hope my question is clear enough.

This is the function that I'm using to get the coordinates of the elements that I want to draw a Rectangle around.

function getListingRectangles() {
    return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
        return e.getBoundingClientRect();
});

解决方案

You can create a canvas element and place it on top of the HTML page:

//Position parameters used for drawing the rectangle
var x = 100;
var y = 150;
var width = 200;
var height = 150;

var canvas = document.createElement('canvas'); //Create a canvas element
//Set canvas width/height
canvas.style.width='100%';
canvas.style.height='100%';
//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position='absolute';
canvas.style.left=0;
canvas.style.top=0;
canvas.style.zIndex=100000;
canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas
document.body.appendChild(canvas); //Append canvas to body element
var context = canvas.getContext('2d');
//Draw rectangle
context.rect(x, y, width, height);
context.fillStyle = 'yellow';
context.fill();

This code should add a yellow rectangle at [100, 150] pixels from the top left corner of the page.

这篇关于使用javascript在HTML上绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！