Estoy haciendo un gráfico circular y me gustaría que mis segmentos se destaquen cuando el cursor se mueva sobre ellos y luego se expandan cuando el usuario haga clic en el segmento. He visto muchos tutoriales sobre cómo hacer que un círculo o un cuadrado reconozcan que el cursor está dentro de su espacio, pero nada que pueda entender por un arco que puede cambiar de tamaño dependiendo del valor ingresado.
Así es como configuré mi gráfico:
chartX = 250; chartY = 250; chartW = 250; chartH = 250; // Movie Genres com = 32; act = 52; rom = 40; dra = 18; sci = 26; totalMovies = com+act+rom+dra+sci; function setup() { createCanvas(500, 500); background(255); } function draw() { startAngle = 0; totalRadians = TWO_PI; // Pie Chart noFill(); ellipse(chartX, chartY, chartW); fill(38,70,83); arc(chartX, chartY, chartW, chartH, startAngle, (totalRadians/(totalMovies/com)),PIE); startAngle = (totalRadians/(totalMovies/com)); fill(42,157,143); arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/act)),PIE); startAngle+=(totalRadians/(totalMovies/act)); fill(233,196,106); arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/rom)),PIE); startAngle+=(totalRadians/(totalMovies/rom)); fill(244,162,97); arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/dra)),PIE); startAngle+=(totalRadians/(totalMovies/dra)); fill(231,111,81); arc(chartX, chartY, chartW, chartH, startAngle, startAngle + (totalRadians/(totalMovies/sci)),PIE); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>Suponiendo que los segmentos de su gráfico circular se definen como una serie de ángulos y que las porciones circulares se originan en una dirección fija, entonces puede usar el desplazamiento horizontal y vertical desde el centro de su gráfico circular hasta el cursor del mouse, y luego usar funciones trigonométricas para encontrar el ángulo entre la línea desde el centro de su pastel hasta el cursor del mouse y el eje horizontal. Ese ángulo se puede usar para determinar sobre qué segmento circular se encuentra el mouse. La función trigonométrica específica que querrá usar es el arco tangente (también conocido como atan, tangente inversa o tan⁻¹), y la función p5.js específica es atan2() .
La función trigonométrica tangente toma un ángulo de una de las esquinas de un triángulo rectángulo y devuelve la relación entre la longitud del lado opuesto a ese ángulo y el lado adyacente (es decir, entre el ángulo y la esquina 90, no la hipotenusa) . Para el mismo ángulo, esta relación será la misma sin importar el tamaño del triángulo. El arco tangente realiza la operación inversa, tomando la relación y devolviendo el ángulo. Sin embargo, debido a que la razón es la misma para algunos triángulos en diferentes orientaciones, la función atan2 es una variante útil que en lugar de tomar una razón, toma los lados vertical y horizontal (firmados para indicar la dirección) y devuelve el ángulo correcto de 0 a 360 ° (o 0 a 2π en radianes). Obviamente, el ángulo en este escenario no es el ángulo real de la esquina del triángulo, sino el ángulo entre los ejes horizontales positivos y la hipotenusa del triángulo.
const colorNames = ['red', 'green', 'blue']; const radius = 80; let segments = [ 34, 55, 89 ]; let angles; let colors; let centerX, centerY; function setup() { createCanvas(windowWidth, windowHeight); ellipseMode(RADIUS); angleMode(DEGREES); noStroke(); let total = segments.reduce((v, s) => v + s, 0); angles = segments.map(v => v / total * 360); colors = colorNames.map(n => color(n)); centerX = width / 2; centerY = height / 2; } function draw() { background(255) let start = 0; let mouseAngle = atan2(mouseY - centerY, mouseX - centerX); if (mouseAngle < 0) { mouseAngle += 360; } let mouseDist = dist(centerX, centerY, mouseX, mouseY); for (let ix = 0; ix < angles.length; ix++) { let hover = mouseDist < radius && mouseAngle >= start && mouseAngle < start + angles[ix]; fill(red(colors[ix]), green(colors[ix]), blue(colors[ix]), hover ? 255 : 127); arc(centerX, centerY, radius, radius, start, start + angles[ix]); start += angles[ix]; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>Supongo que puedes hacer algo con los ángulos. puede obtener el ángulo desde el centro del gráfico con la función cos/sin simple, y luego puede determinar si el mouse está en la línea del arco por la distancia desde el centro del gráfico.