0
279
Vistas`line()` en p5js cruza los bordes. Además de hacer los cálculos yo mismo, ¿hay una manera más fácil de hacer que la línea simplemente conecte sus bordes?
Estoy tratando de dibujar una línea para conectar dos círculos dados.
function setup() { createCanvas(300, 100); background(220); noFill(); ellipse(150, 30, 20, 20); ellipse(100, 50, 20, 20); line(100, 50, 150, 30); } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>Los parámetros que obtengo son x, y del centro del círculo. Si uso la información directamente, la línea cruza ambos círculos.
Sé que puedo hacer los cálculos, solo me gustaría saber si hay una manera más fácil de hacer que la línea simplemente conecte sus bordes.
2 Respuestas
Responde la pregunta0
Una manera fácil sería dibujar la línea primero, luego dibujar los círculos y rellenarlos con el color de fondo de esta manera, la línea dentro de los círculos se ocultará, esto solo funciona si no te importa que el fondo y el color de los círculos sean iguales.
function setup() { createCanvas(300, 100); background(220); line(100, 50, 150, 30); fill(220); ellipse(150, 30, 20, 20); ellipse(100, 50, 20, 20); } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>0
Usando círculos opacos
Una solución similar a lo que Sarkar dijo antes, en la medida en que no le importe que los círculos tengan un color de relleno (si su color es igual o diferente al color de fondo, no importa), la forma más fácil de hacerlo. es simplemente haciendo que los círculos cubran la línea dibujándolos después con cualquier color opaco de relleno.
Uso de un objeto gráfico
Sin embargo, si desea tener esta forma como una forma transparente, para tener más libertad con el uso que pretende hacer de ella, puede intentar esto: crea un objeto gráfico, dibuja la línea, luego activa el modo de borrado y dibuja los círculos para que borren la parte de la línea que se superponen, luego sales del modo de borrado y dibujas normalmente los círculos vacíos. Una vez que haya terminado con su gráfico, use la función de imagen para dibujarlo sobre el lienzo.
let graphic; function setup() { createCanvas(300, 100); graphic = createGraphics(width, height); graphic.line(100, 50, 150, 30); graphic.erase(); graphic.ellipse(150, 30, 20, 20); graphic.ellipse(100, 50, 20, 20); graphic.noErase(); graphic.noFill(); graphic.ellipse(150, 30, 20, 20); graphic.ellipse(100, 50, 20, 20); background(220); image(graphic,0,0); } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>