时间戳

首页 > 解决方案 > 如何在 p5.js 中识别弧内的光标？

javascript - 如何在 p5.js 中识别弧内的光标？

问题描述

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

这是我设置图表的方式：

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>

标签： javascriptp5.js

解决方案

假设您的饼图段被定义为一系列角度并且饼图切片源自固定方向，那么您可以使用从饼图中心到鼠标光标的水平和垂直偏移量，然后使用三角函数找到从饼图中心到鼠标光标的线与水平轴之间的角度。然后可以使用该角度来确定鼠标在哪个饼图段上。您将要使用的具体三角函数是反正切（又名 atan、反正切或 tan⁻¹），具体的 p5.js 函数是atan2().

三角函数 tangent 从直角三角形的一个角取一个角，并返回与该角相对的边和与其相邻的边的长度之间的比率（即角和 90 角之间，而不是斜边） . 对于相同的角度，无论三角形的大小如何，这个比率都是相同的。反正切执行相反的操作，取比率并返回角度。但是，因为对于不同方向的某些三角形，比率是相同的，所以 atan2 函数是一个有用的变体，它不采用比率，而是采用垂直和水平边（带符号以指示方向）并返回从 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>

推荐阅读