Processing Shape Placement

Question

我是新來的處理，並試圖找出爲什麼這是發生在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()結束，其中基質是復位。

如果你注意，用命令行改變圓實際上出現在屏幕的底部，翻譯半高度（加上你用在橢圓func中的半高度）。

爲了進一步瞭解這些，我建議這個教程：

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