Question

我是Processing的新手，并试图弄清楚为什么会在draw（）下发生这种情况。根据我放置矩形的位置，圆圈会显示或不显示。我的目标是在矩形前面获得可拖动的圆圈。

int x;
int y;

public void setup()
{
    size(600, 600);
}

public void draw()
{
    background(255);
    // if timeLine() placed here, circle doesn't appear
    circle();
    timeLine();  // if timeline placed here, circle appears behind rectangle
}

public void circle()
{
    ellipse(this.x, height/2, 10, 10);
}

public void mouseDragged()
{
    translate(width/2, height/2);
    this.x = mouseX;
    this.y = mouseY;
}

public void mousePressed()
{
    translate(width/2, height/2);
    if (mouseY < height/2 + 10 && mouseY > height / 2 - 10) {
        this.x = mouseX;
    }
}

public void timeLine()
{
    translate(width/2, height/2);
    rectMode(CENTER);
    rect(0, 0, 2, 20);
}

Answer 1

您的问题是您在不使用timeline() pusMatrix()的情况下调用翻译（来自popMatrix()函数），因此这些调用会影响其后的所有内容，直到{draw()结束。 1}}，重置矩阵。

如果你注意了，那么有序的线被改变了，圆圈实际上出现在屏幕的底部，向下翻了一半的高度（加上你在椭圆函数中使用的半高）。

为了进一步了解这些，我建议使用本教程：

https://processing.org/tutorials/transform2d/

所以你只需要封装你的转换，如下所示：

int x;
int y;

public void setup()
{
  size(600, 600);
}

public void draw()
{
  background(255);
  timeLine();  
  circle();
}

public void circle()
{
  ellipse(this.x, height/2, 10, 10);
}

public void mouseDragged()
{
  translate(width/2, height/2);
  this.x = mouseX;
  this.y = mouseY;
}

public void mousePressed()
{
  translate(width/2, height/2);
  if (mouseY < height/2 + 10 && mouseY > height / 2 - 10) {
    this.x = mouseX;
  }
}

public void timeLine()
{
  //encapsulating matrix transformations
  //with push pop matrix
  pushMatrix();

  translate(width/2, height/2);
  rectMode(CENTER);
  rect(0, 0, 2, 20);

  popMatrix();
}

处理形状放置

1 个答案: