0
274
Visualizações¿Cómo puedo dibujar una línea con el lienzo en coordenadas específicas en la pantalla... (coordenadas absolutas)
soy novato en lienzo y svg. Quiero hacer un lienzo o una línea svg entre coordenadas específicas. Por ejemplo, tengo dos rectángulos y tengo que hacer una línea entre ellos (en este caso, tengo que hacer que esta línea sea el centro de dos rectángulos) 
lo que he intentado: códigos SVG como este:
HTML:
<svg version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="15px" xml:space="preserve"> <path class="path2" fill="#01a09e" stroke-width="5" stroke="#01a09e" d="M0 0 l890 0"/> </svg>CSS:
.path2 { stroke-dasharray: 1120; /* stroke-dashoffset: 800; */ animation: draw1 5s linear alternate; } @keyframes draw1 { from { stroke-dashoffset: 1120; } to { stroke-dashoffset: 2240; } }
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Puede lograr esto usando solo lienzo. quadraticCurveTo() para dibujar la línea curva y rect() para dibujar los rectángulos.
El quadraticCurveTo() necesita un punto de partida, es por eso que estoy usando moveTo() antes de dibujar la línea.
const canvas = document.querySelector("canvas"), ctx = canvas.getContext("2d"); // Draw rectangle one ("r" stands for rectangle) let r_x = 20, r_y = 20, r_width = 80, r_height = 30; ctx.beginPath(); ctx.rect(r_x, r_y, r_width, r_height); // Draw curved line let start_x = r_x + r_width*2/3, start_y = r_y + r_height, point_one = { x: 30, y: 130 }, point_two = { x: 120, y: 150 }; ctx.moveTo(start_x, start_y) ctx.quadraticCurveTo( point_one.x, point_one.y, point_two.x, point_two.y ); // Draw second rectangle r_x = 80, r_y = 150; ctx.rect(r_x, r_y, r_width, r_height); ctx.stroke(); <canvas width="300" height="200"></canvas>
·
Juan Pablo Isaza
Relatório
Responde à pergunta