Processing 获取显示在框行前面的文本-处理

还在学习。。。所以我的目标是让草图的字体出现在方框前面。我明白为什么它在一排箱子后面。这是因为循环会立即转到下一个框并将其分层到字体上。但是，由于变量是在本地定义的。。。。我真的不知道还能做什么…循环对于更新目的也很重要

// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event

int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];

public void setup()
{
    frameRate(60);
    size(600, 600);
    strokeWeight(1);

    int offset = width/numOfIndices;
    for (int i = 0; i < numOfIndices; i++) {
        indexes[i][0] = i*offset + offset/2; // X Coordinate
        indexes[i][1] = height/2;            // Y Coordinate
    }
}

public void draw()
{
    background(255);

    // loop over each rectangle per frame
    for (int i = 0; i < numOfIndices; i++) {
        float widthRect = 5;
        float heightRect = 20;

        // A
        float topLeftX = indexes[i][0] - widthRect/2;
        float topLeftY = height/2 + heightRect/2;

        // C
        float bottomRightX = indexes[i][0] + widthRect/2;
        float bottomRightY = height/2 - heightRect/2;

        if (
                mouseX > topLeftX &&
                mouseX < bottomRightX &&
                mouseY > bottomRightY &&
                mouseY < topLeftY
        ) {
            // Inside rectangle. Do something.
            stroke(100);
            fill(100);
            //text(i, indexes[i][0], indexes[i][1]);
        } else {
            // Not inside rectangle. Do something else.
            stroke(200);
            fill(200);
        }

        rectMode(CENTER);
        rect(
                indexes[i][0],  // X
                indexes[i][1],  // Y
                widthRect,      // width
                heightRect,     // height
                20              // radi for corners (rounded)
        );

        if (
                mouseX > topLeftX &&
                mouseX < bottomRightX &&
                mouseY > bottomRightY &&
                mouseY < topLeftY
        ) {
            // Inside rectangle. Do something.
            textSize(26);
            text(i, indexes[i][0], indexes[i][1]);
        }
    }
}

//注意事项：如何确定点是否位于矩形内\
//将鼠标悬停在矩形上并触发事件
整数指数=50；
float[][]索引=新的float[numofindex][2]；
公共作废设置（）
{
帧率（60）；
大小（600600）；
冲程重量（1）；
int offset=宽度/numofindex；
对于（int i=0；itopLeftX&&
mouseX右下角&&
鼠标左键
) {
//在长方形内。做点什么。
中风（100）；
填充（100）；
//文本（i，索引[i][0]，索引[i][1]）；
}否则{
//不在矩形内。做点别的。
中风（200）；
填充（200）；
}
矩形模式（中心）；
直肠(
索引[i][0]，//X
索引[i][1]，//Y
widthRect，//宽度
heightRect，//高度
20//拐角处的半径（圆角）
);
如果(
mouseX>topLeftX&&
mouseX右下角&&
鼠标左键
) {
//在长方形内。做点什么。
文本大小（26）；
文本（i，索引[i][0]，索引[i][1]）；
}
}
}

有几种不同的方法。其中一种方法非常简单，如将

for

循环反转如下：

for（inti=numofindexes-1；i>=0；i--）

这样，矩形将从右向左渲染。这不是一个很好的解决方案，它只在这种情况下有效，因为文本位置在矩形的右侧

更好的方法是渲染所有矩形，然后只渲染文本。这在处理UI内容时非常常见。这将成为：

// Considerations: How to determine if point lies within a rectangle? \
// Hover over rectangle and trigger event

int numOfIndices = 50;
float[][] indexes = new float[numOfIndices][2];

public void setup()
{
    frameRate(60);
    size(600, 600);
    strokeWeight(1);

    int offset = width/numOfIndices;
    for (int i = 0; i < numOfIndices; i++) {
        indexes[i][0] = i*offset + offset/2; // X Coordinate
        indexes[i][1] = height/2;            // Y Coordinate
    }
}

public void draw()
{
    background(255);

    float widthRect = 5;
    float heightRect = 20;

    // loop over each rectangle per frame
    for (int i = 0; i < numOfIndices; i++) {

        // A
        float topLeftX = indexes[i][0] - widthRect/2;
        float topLeftY = height/2 + heightRect/2;

        // C
        float bottomRightX = indexes[i][0] + widthRect/2;
        float bottomRightY = height/2 - heightRect/2;

        if (
                mouseX > topLeftX &&
                mouseX < bottomRightX &&
                mouseY > bottomRightY &&
                mouseY < topLeftY
        ) {
            // Inside rectangle. Do something.
            stroke(100);
            fill(100);
            //text(i, indexes[i][0], indexes[i][1]);
        } else {
            // Not inside rectangle. Do something else.
            stroke(200);
            fill(200);
        }

        rectMode(CENTER);
        rect(
                indexes[i][0],  // X
                indexes[i][1],  // Y
                widthRect,      // width
                heightRect,     // height
                20              // radi for corners (rounded)
        );
    }

    stroke(100);
    fill(100);

    for (int i = 0; i < numOfIndices; i++) {
        // A
        float topLeftX = indexes[i][0] - widthRect/2;
        float topLeftY = height/2 + heightRect/2;

        // C
        float bottomRightX = indexes[i][0] + widthRect/2;
        float bottomRightY = height/2 - heightRect/2;

        if (
                mouseX > topLeftX &&
                mouseX < bottomRightX &&
                mouseY > bottomRightY &&
                mouseY < topLeftY
        ) {
            // Inside rectangle. Do something.
            textSize(26);
            text(i, indexes[i][0], indexes[i][1]);
        }
    }
}

//注意事项：如何确定点是否位于矩形内\
//将鼠标悬停在矩形上并触发事件
整数指数=50；
float[][]索引=新的float[numofindex][2]；
公共作废设置（）
{
帧率（60）；
大小（600600）；
冲程重量（1）；
int offset=宽度/numofindex；
对于（int i=0；itopLeftX&&
mouseX右下角&&
鼠标左键
) {
//在长方形内。做点什么。
中风（100）；
填充（100）；
//文本（i，索引[i][0]，索引[i][1]）；
}否则{
//不在矩形内。做点别的。
中风（200）；
填充（200）；
}
矩形模式（中心）；
直肠(
索引[i][0]，//X
索引[i][1]，//Y
widthRect，//宽度
heightRect，//高度
20//拐角处的半径（圆角）
);
}
中风（100）；
填充（100）；
对于（int i=0；itopLeftX&&
mouseX右下角&&
鼠标左键
) {
//在长方形内。做点什么。
文本大小（26）；
文本（i，索引[i][0]，索引[i][1]）；
}
}
}