Question

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

在我宣布所有vars的部分，你可以看到我使用：

int breedte = 600;
int hoogte = 600;

这些假设是：

int breedte = width;
int hoogte = height;

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

size(600,600)

所以我要问的是：

如何点击（移动）椭圆？
为什么我不能在＆＃39; int hoogte＆＃39;上使用宽度和高度？和＆＃39; int breedte＆＃39;

先谢谢。

主要文件：

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));
}

Answer 1

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

但一般的方法是使用类似下面的函数来检查你点击的点是否确实位于你提供的椭圆内。

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
}

Answer 2

将来，请尝试发布MCVE而不是一堆断开连接的代码段或整个项目。另外，请每个帖子只询问一个问题。

要使您的圈子可点击，您将不得不编写代码来检查圈子是否被点击。这实际上是两个单独的检查。首先，您必须检测何时按下鼠标。一种方法是定义mousePressed()函数：

void mousePressed(){
  // mouse is pressed
}

然后你必须检查鼠标当前是否在圆圈内。您可以使用dist()函数：如果鼠标与圆心之间的距离小于圆的半径，则鼠标位于圆内。这可能是这样的：

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

无耻的自我推销：我在Processing中编写了一个关于碰撞检测的教程，包括点圆碰撞，可用here。

至于为什么你不能在草图的顶部使用width和height，因为草图顶部的代码是在{{{{}之前执行的。 1}}函数触发，setup()和width变量不会设置，直到您从height函数调用size()之后。因此，您必须将该代码移至后调用setup()。

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

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

2 个答案: