0
202
VistasCómo dibujar cuadrados dentro de un elemento div en javascript
Tengo un div html simple que servirá como una ventana gráfica. y necesito dibujar 1 o más cuadrados dentro de este div
<div style= "height: 400px; width: 400px; background-color: powderblue;"> </div>Ya puedo recibir la dimensión de los cuadrados o rectángulos. y al recibir estos datos, debo poder dibujar cuadrados que no tengan relleno.
{x: 10, y: 20, height: 50, width: 50} {x: 210, y: 120, height: 100, width: 70}Puede haber 1 o más cuadrados, y también debo poder eliminar los cuadrados dibujados. Pero antes de todo eso, ¿cómo puedo dibujar un cuadrado dentro del elemento div como en la imagen de abajo? Los cuadrados que se salgan de los límites del div deben recortarse
2 Respuestas
Responde la pregunta0
Puede usar la API de lienzo para dibujar formas.
Asegúrese de establecer el tamaño del elemento del lienzo con css, y las formas deben recortarse de acuerdo con ese tamaño.
Para eliminar una forma, simplemente elimine los datos, borre el lienzo y vuelva a dibujar.
var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); let rects = [ {x: 10, y: 20, height: 50, width: 50}, {x: 210, y: 120, height: 100, width: 70}, ]; rects.forEach(r => { ctx.beginPath(); ctx.rect(rx, ry, r.width, r.height); ctx.stroke(); }); <canvas id="canvas" />0
Puede establecer la position: relative en el div principal y luego usar position: absolute y top , left , width y height para los niños.
Algo como esto:
<div style= "height: 400px; width: 400px; background-color: powderblue;"> <div style="position: absolute; left: 10px; top: 20px; height: 50px; width: 50px"></div> </div> Es posible que deba agregar overflow: hidden en el padre y también agregar algunos bordes en los hijos para que sean visibles.