Question

还在学习......所以我的目标是草图让字体显示在方框的前面。我明白为什么它在一排盒子后面。这是因为循环立即进入下一个框并将其叠加在字体上。但是，因为变量是在本地定义的......我真的不知道还能做什么......循环对于更新目的也很重要。

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

Answer 1

有一些不同的方法。一个是像for循环一样简单，如下所示：

for (int i = numOfIndices-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]);
        }
    }
}

让文本出现在行的前面 - 处理

1 个答案: