处理形状放置答案

【问题标题】：Processing Shape Placement处理形状放置
【发布时间】：2014-10-28 20:09:07
【问题描述】：

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

【问题讨论】：

标签： processing

【解决方案1】：

您的问题是您正在调用 translate（来自 timeline() 函数）而不使用 pusMatrix() popMatrix()，因此这些调用会影响它之后的所有内容，直到 draw() 结束，矩阵所在的位置重置。

如果你注意的话，命令改变的线条实际上出现在屏幕底部，向下平移了一半高度（加上你已经在椭圆函数中使用的一半高度）。

为了进一步理解这些，我推荐这个教程：

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

【讨论】：