如何使（移动）椭圆可点击？处理

提问者：小点点

如何使（移动）椭圆可点击？处理

所以我从一周前开始学习处理，我试图得到一个可点击的移动椭圆。我遵循了处理API，但我无法弄清楚。我删除了所有与可点击椭圆相关的代码，因为它一团糟。

在我声明所有变量的部分，您可以看到我使用：

int breedte = 600;
int hoogte = 600;

这些假设是：

int breedte = width;
int hoogte = height;

但是由于某种原因，宽度和高度不输出声明的宽度和高度：

size(600,600)

所以我要问的是：

如何使（移动）椭圆可点击？

为什么我不能在'int hoogte'和'int breedte'上使用宽度和高度？

提前谢谢。

主文件：

int x = 0;
int leftSide = 0;
int rightSide = width;
int bottomSide = height;

int totalHits = 0;
int totalMiss = 0;

boolean start = false;

int circelSize = 100;
int circelRings = 24;
int circelSpeed = 1;
int circelPositionY = 0;

int breedte = 600;
int hoogte = 600;

String[] buttonText = {"Start","Stop"};
String buttonTextActive = buttonText[0];
int[] buttonColor = {0,90};
int buttonColorActive = buttonColor[0];
int buttonHighlight = 50;
int buttonSize = 80;  
int buttonY = breedte - (buttonSize /2);
int buttonX = hoogte / 2 - 40;

void setup() {
  size(600, 600);
  smooth();
  noStroke();
}

void draw() {
  if (start) {
    circelPositionY = circelPositionY + circelSpeed;
    drawCircel(circelPositionY);
    if (circelPositionY == (width + circelSize)) {
      circelPositionY = 0;
    }
  }
  drawButton();
}

事件文件：

void mousePressed() {
  // Start or Stop button
  if(mouseX > buttonX & mouseX < buttonX  + buttonSize & mouseY > buttonY & mouseY < buttonY + (buttonSize / 2)){
    if(start) {
      start = false;
      buttonColorActive = buttonColor[0];
      buttonTextActive = buttonText[0];
      println("Game stoped");
    } else {
      start = true;
      buttonColorActive = buttonColor[1];
      buttonTextActive = buttonText[1];
      println("Game started");
    }
  }
//HERE SHOULD GO THE CLICKABLE ELLPISE
}

函数文件：

void drawCircel(int circelPositionY) {
  background(204);
  for (int i = 0; i < circelRings; i = i+1) {
    int even = i % 2;
    if (even == 0) {
      fill(255,0,0);
      ellipse(-(circelSize / 2) + circelPositionY, height / 2 - (circelSize / 2), circelSize - (i * (circelSize / circelRings)), circelSize - (i * (circelSize / circelRings)));
    } else {
      fill(255);
      ellipse(-(circelSize / 2) + circelPositionY, height / 2 - (circelSize / 2), circelSize - (i * (circelSize / circelRings)), circelSize - (i * (circelSize / circelRings)));
    }
  }
}

void drawButton() {
  fill(buttonColorActive);
  rect(buttonX,buttonY, buttonSize, buttonSize / 2);
  fill(255);
  textAlign(CENTER, CENTER);
  text(buttonTextActive, buttonX + (buttonSize / 2),buttonY + (buttonSize / 4));
}

共2个答案

匿名用户

以后，请尽量发布一个MCVE，而不是一堆断开连接的片段或你的整个项目。也请每个帖子只问一个问题。

要使你的圆圈可点击，你必须编写代码来检查圆圈是否被点击。这实际上是两个独立的检查。首先，你必须检测鼠标何时被按下。一种方法是定义一个mouseP的（）函数：

void mousePressed(){
  // mouse is pressed
}

然后你必须检查鼠标当前是否在圆圈内。你可以使用dist（）函数：如果鼠标和圆心之间的距离小于圆圈的半径，那么鼠标就在圆圈内。这可能看起来像这样：

void mousePressed(){
  if(dist(mouseX, mouseY, circleX, circleY) < circleRadius){
    // mouse is pressed inside the circle
  }
}

无耻自运营：我写了一篇关于处理中的冲突检测的教程，包括点-圆碰撞，可在此处获得。

至于为什么你不能在你的草图顶部使用wide和高，那是因为你草图顶部的代码是在settings（）函数触发之前执行的，并且在你从settings（）函数调用size（）之后，宽度和高度变量才会被设置。所以你必须将代码移动到调用size（）之后。

如果您有后续问题，请在新的问题帖子中发布更新的MCVE，我们将从那里开始。祝你好运。

匿名用户

处理没有提供命中检测的api，所以需要自己实现这个，我认为这是一个很好的学习练习。你可以在这里探索椭圆的数学。

但是一般的方法是使用下面这样的函数来检查您单击的点是否确实在您提供的椭圆内。

boolean InsideEllipse(
    float x, float y, 
    float xc, float yc, 
    float width, float height
) { 

    // First half the width and height to get the ellipse parameters
    float a = width / 2;
    float b = height / 2;

    // Now calculate the deltas:
    float xd = x - xc;
    float yd = y - yd;

    // Now the equation of an ellipse is given by 
    //      x^2 / a ^ 2 + y^2 / b ^ 2 = 1
    // So if we are inside the ellipse, we would expect the left hand
    // side of this expression to be less than one
    boolean inside = xd * xd / (a * a) + yd * yd / (b * b) <= 1.0
    return inside
}