javascript - 检查P5.js中是否点击了圆弧

Question

在 P5 中检查圆是否被点击非常简单，但我想不出用圆弧做同样事情的简单方法。

这就是我创建弧线的方式:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(255);
  stroke(0);
  strokeWeight(10); 
  noFill();
  arc(200, 200, 200, 200, HALF_PI, PI*1.75);
}

这就是检查圆圈是否被点击的方法:

function mousePressed() {
  var d = dist(mouseX, mouseY, 200,200);
  var within_diam = (d<200+width/2 && d>200-width/2);
  console.log('Circle clicked');
}

除了圆圈是否被点击之外，我还可以检查圆弧缺失的扇区是否被点击，但它看起来很麻烦，我很确定这应该是一种正确且简单的方法。

Answer 1

您需要检查距离和 Angular 。

下面的示例正确使用了距离，但 Angular 计算不正确。

let withinAngle = angle > angleStart && angle < angleEnd;

Angular 值从起始 Angular 开始增长，直到达到 180 度。然后 Angular 值再次下降。我不确定为什么会这样。

var pos        = { x: 200, y: 200 },
    radius     = 100,
    size       = { width: radius * 2, height: radius * 2 },
    weight     = 10,
    angleStart = Math.PI / 2,
    angleEnd   = Math.PI * 1.75,
    angleDiff  = angleEnd - angleStart;

function setup() {
  createCanvas(400, 400);
  textFont('Arial', 16);
}

function draw() {
  background(255);
  stroke(0);
  strokeWeight(weight);
  //noFill();
  arc(pos.x, pos.y, size.width, size.height, angleStart, angleEnd);
  
  let origin = createVector(pos.x, pos.y);
  drawArrow(origin, createVector(size.width / 2, 0), 'red');
  drawArrow(origin, createVector(mouseX - pos.x, mouseY - pos.y), 'blue');
  
  let target = createVector(mouseX - pos.x, (mouseY - pos.y) * -1);
  let magnitude = dist(mouseX, mouseY, pos.x, pos.y);
  let angle = origin.angleBetween(target);
  
  strokeWeight(0);
  text([
    `Target: (${target.x}, ${target.y})`,
    `Magnitude: ${magnitude.toFixed(3)}`,
    `Radians: ${(angle / Math.PI).toFixed(3)}π`,
    `Degrees: ${degrees(angle).toFixed(3)}°`
  ].join('\n'), 250, 20);
}

function mousePressed(e) {
  let origin = createVector(pos.x, pos.y);
  let target = createVector(mouseX - pos.x, (mouseY - pos.y) * -1);
  if (checkBounds(origin, target)) {
    console.log('Circle stroke clicked');
  }
}

// Check to see if the click was within the stroke weight.
// There is no angle check in here...
function checkBounds(origin, target) {
  let magnitude = dist(mouseX, mouseY, size.width, size.height);
  let withinDist = magnitude > radius && magnitude < radius + weight;
  let angle = origin.angleBetween(target);
  let withinAngle = angle > angleStart && angle < angleEnd;
  return withinDist && withinAngle;
}

/** https://p5js.org/reference/#/p5.Vector/angleBetween */
function drawArrow(base, vec, myColor) {
  push();
  stroke(myColor);
  strokeWeight(3);
  fill(myColor);
  translate(base.x, base.y);
  line(0, 0, vec.x, vec.y);
  rotate(vec.heading());
  let arrowSize = 7;
  translate(vec.mag() - arrowSize, 0);
  triangle(0, arrowSize / 2, 0, -arrowSize / 2, arrowSize, 0);
  pop();
}

.as-console-wrapper { height: 80px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>