如何识别p5.js中圆弧内的光标？

Question

我正在制作一个饼图，我希望我的分段在光标移到它们上方时突出显示，然后在用户单击该分段时展开。我看过很多关于如何让圆圈或正方形识别光标在其 space 内的教程，但我无法绕过任何可以根据值输入改变大小的圆弧。

以下是我设置图表的方式：

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>

Answer 1

我假设你可以用角度做一些事情。可以用简单的cos/sin函数得到图表中间的角度，然后可以根据离图表中间的距离判断鼠标是否在圆弧线上。

Answer 2

假设您的饼图段被定义为一系列角度并且饼图切片源自固定方向，那么您可以使用从饼图中心到鼠标光标的水平和垂直偏移，然后使用三角函数找到从饼图中心到鼠标光标的线与水平轴之间的角度。然后可以使用该角度来确定鼠标位于哪个饼图段上。您要使用的特定三角函数是 arc tangent (a.k.a atan, inverse tangent, or tan⁻¹), and the specific p5.js function is atan2().

三角函数正切从直角三角形的一个角取一个角，returns该角的对边与邻边的长度之比（即角与角之间的比值）和 90 角，而不是斜边）。对于相同的角度，无论三角形的大小，这个比例都是相同的。反正切执行反向操作，取比率并返回角度。但是，由于某些三角形的不同方向的比率相同，所以 atan2 函数是一个有用的变体，它不是采用比率，而是采用垂直和水平边（符号表示方向）和 returns 正确的角度从 0 到 360°（或以弧度表示的 0 到 2π）。显然这个场景中的角度不是三角形角的实际角度，而是正水平轴和三角形斜边之间的角度。

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>

如何识别p5.js中圆弧内的光标？

How to identify the cursor within an arc in p5.js?

javascript

p5.js