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

intx；
int-y；
公共作废设置（）
{
大小（600600）；
}
公众抽签（）
{
背景（255）；
//如果时间轴（）放在此处，则不会出现圆圈
圆圈（）；
timeLine（）；//如果将时间线放在此处，则圆圈显示在矩形后面
}
公共空间圈（）
{
椭圆（这个.x，高度/2,10,10）；
}
公共无效鼠标标记（）
{
平移（宽度/2，高度/2）；
这个.x=鼠标；
this.y=mouseY；
}
公共空间鼠标垫（）
{
平移（宽度/2，高度/2）；
如果（鼠标<高度/2+10&&鼠标>高度/2-10）{
这个.x=鼠标；
}
}
公共时间线（）
{
平移（宽度/2，高度/2）；
矩形模式（中心）；
rect（0,0,2,20）；
}

您的问题是调用translate（从

timeline（）

函数）时没有使用

pusMatrix（）

popMatrix（）

，因此这些调用会影响它之后的一切，直到

draw（）

结束时，矩阵被重置

如果你注意的话，改变了线的顺序，圆圈实际上出现在屏幕的底部，向下平移半高（加上你在ellipse func中已经使用的半高）

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

因此，您只需要封装您的转换，如下所示：

intx；
int-y；
公共作废设置（）
{
大小（600600）；
}
公众抽签（）
{
背景（255）；
时间线（）；
圆圈（）；
}
公共空间圈（）
{
椭圆（这个.x，高度/2,10,10）；
}
公共无效鼠标标记（）
{
平移（宽度/2，高度/2）；
这个.x=鼠标；
this.y=mouseY；
}
公共空间鼠标垫（）
{
平移（宽度/2，高度/2）；
如果（鼠标<高度/2+10&&鼠标>高度/2-10）{
这个.x=鼠标；
}
}
公共时间线（）
{
//封装矩阵变换
//带推送矩阵
pushMatrix（）；
平移（宽度/2，高度/2）；
矩形模式（中心）；
rect（0,0,2,20）；
popMatrix（）；
}