Sé que hay una pregunta similar aquí, pero ni la pregunta ni la respuesta tiene ningún código.

Lo que quiero hacer, es un puerto de esta funcionalidad a un 100% Javascript solución. Ahora soy capaz de dibujar un rectángulo en la parte superior de contenido HTML con PHP.

Me raspe un sitio web con CasperJS, tomar una instantánea, enviar la instantánea camino de regreso a PHP junto con un objeto json que contiene toda la información necesaria para dibujar un rectángulo con GD bibliotecas. Que funciona, pero ahora quiero puerto de la funcionalidad en Javascript.

La forma en que me estoy poniendo en el rectángulo de la información es el uso de getBoundingClientRect() que devuelve un objeto con top,bottom,height, width, left,y right.

Hay alguna forma de «dibujar» el código HTML de la web en un elemento canvas y, a continuación, dibuje un Rectángulo en el que el elemento canvas?
O hay alguna manera de dibujar un rectángulo en la parte superior del HTML con Javascript?

Espero que mi pregunta es bastante clara.

Esta es la función que estoy usando para obtener las coordenadas de los elementos que quiero para dibujar un Rectángulo alrededor.

function getListingRectangles() {
    return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) {
        return e.getBoundingClientRect();
});
  • div es un elemento rectangular, que se puede colocar absolutamente en una página…
InformationsquelleAutor ILikeTacos | 2013-11-07

1 Comentario

  1. 8

    Puede crear un elemento canvas y colocarlo en la parte superior de la página HTML:

    //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();

    Este código debe agregar un rectángulo amarillo en [100, 150] los píxeles de la esquina superior izquierda de la página.

    • Impresionante! Sólo una pregunta más, se que la cubierta de lona del elemento div que quiero destacar?
    • Usted puede colocar el rectángulo por el cambio de las variables x, y, anchura, altura en la parte superior del código, si es eso lo que quieres decir. Si usted significa que usted será capaz de hacer clic a través de ella a los contenidos bajo, entonces sí.

Dejar respuesta

Please enter your comment!
Please enter your name here