clay icon indicating copy to clipboard operation
clay copied to clipboard

[BUG] - Single corner radius value does not render any radius

Open Daniel-Shunom opened this issue 5 months ago • 5 comments

Attempting to use a single corner radius does not work currently on this version of clay.

Steps to reproduce:

  • Apply any number of corner radii except for all four.

Daniel-Shunom avatar Aug 15 '25 14:08 Daniel-Shunom

Can confirm.

Only ever the topLeft corner radius is taken and that is for every corner.

(Clay_CornerRadius){
  .topLeft = 64,
  .topRight = 32,
  .bottomLeft = 16,
  .bottomRight = 8
}

Should in the current version render every corner with a radius of 64.

Throvn avatar Aug 17 '25 12:08 Throvn

Ah, I think it's not really a bug, this feature is just not implemented in the raylib renderer at the moment.

case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
    Clay_RectangleRenderData *config = &renderCommand->renderData.rectangle;
    if (config->cornerRadius.topLeft > 0) {
        float radius = (config->cornerRadius.topLeft * 2) / (float)((boundingBox.width > boundingBox.height) ? boundingBox.height : boundingBox.width);
        DrawRectangleRounded((Rectangle) { boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height }, radius, 8, CLAY_COLOR_TO_RAYLIB_COLOR(config->backgroundColor));
    } else {
        DrawRectangle(boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height, CLAY_COLOR_TO_RAYLIB_COLOR(config->backgroundColor));
    }
    break;
}

Throvn avatar Aug 17 '25 13:08 Throvn

After fiddeling around a bit, I've decided to go with a simple monkey patched helper function. I would have liked to opened up a PR but I didn't find an elegant solution which allows for opacity.

Therefore, this simple function (which only looks good with solid color):

void DrawRectangleRoundedEx(Rectangle rec, Clay_CornerRadius radius, Color color)
{
    DrawCircle(rec.x + radius.topLeft, rec.y + rec.height - radius.topLeft, radius.topLeft, color);
    DrawCircle(rec.x + rec.width - radius.topRight, rec.y + rec.height - radius.topRight, radius.topRight, color);
    DrawCircle(rec.x + radius.bottomLeft, rec.y + radius.bottomLeft, radius.bottomLeft, color);
    DrawCircle(rec.x + rec.width - radius.bottomRight, rec.y + radius.bottomRight, radius.bottomRight, color);

    DrawRectangle(rec.x + radius.topLeft, rec.y + rec.height / 2, rec.width - radius.topLeft - radius.topRight, rec.height / 2, color);
    DrawRectangle(rec.x + radius.bottomLeft, rec.y, rec.width - radius.bottomLeft - radius.bottomRight, rec.height / 2, color);
    DrawRectangle(rec.x, rec.y + radius.bottomLeft, rec.width / 2, rec.height - radius.bottomLeft - radius.topLeft, color);
    DrawRectangle(rec.x + rec.width / 2, rec.y + radius.bottomRight, rec.width / 2, rec.height - radius.bottomRight - radius.topRight, color);
}

In line 232 in clay_renderer_raylib.c you need to adjust the case CLAY_RENDER_COMMAND_TYPE_RECTANGLE to:

case CLAY_RENDER_COMMAND_TYPE_RECTANGLE:
        {
            Clay_RectangleRenderData *config = &renderCommand->renderData.rectangle;
            if (config->cornerRadius.topLeft > 0)
            {
                DrawRectangleRoundedEx((Rectangle){boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height}, config->cornerRadius, CLAY_COLOR_TO_RAYLIB_COLOR(config->backgroundColor));
            }
            else
            {
                DrawRectangle(boundingBox.x, boundingBox.y, boundingBox.width, boundingBox.height, CLAY_COLOR_TO_RAYLIB_COLOR(config->backgroundColor));
            }
            break;
        }

Throvn avatar Aug 17 '25 19:08 Throvn

I am not sure how raylib works. But you could just use a shader to draw the rectangle or borders? I am doing it like this: https://www.shadertoy.com/view/wcBczz

Jannes1000Orks avatar Aug 27 '25 10:08 Jannes1000Orks

Okey, I gave it another shot. Thanks @Jannes1000Orks for your example. I've adjusted it to my needs.

I've hacked together another clay_raylib_renderer.c implementation which uses a shader now and therefore also includes transparency.

Here is the source: https://gist.github.com/Throvn/b0ed0ff6fbe462cc352d6d203eaa5c89

Throvn avatar Sep 05 '25 22:09 Throvn