TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-05-12 13:28:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: TheZone:e5fa3b90d05b44dea9410622904b39314ea50608
Branches Tags
TheZone:main
TheZone:014-clip-config
TheZone:014-single-char-hash
TheZone:experimental-render-command-tree-depth
TheZone:014-simd-hash
TheZone:013-config-refactor
TheZone:013-tst-branch
TheZone:013-add-text-contents-hash-option
TheZone:013-arena-align-cache-line
TheZone:013-measure-text-string-slice
TheZone:013-expose-bounding-boxes
TheZone:013-split-padding-values
TheZone:013-fix-newline-handling
TheZone:v0.13
TheZone:v0.12
TheZone:v0.11
TheZone:v0.10
...
compare: TheZone:d33896992f74ec8a14216c2c60845f2799a0bbb3
Branches Tags
TheZone:main
TheZone:014-clip-config
TheZone:014-single-char-hash
TheZone:experimental-render-command-tree-depth
TheZone:014-simd-hash
TheZone:013-config-refactor
TheZone:013-tst-branch
TheZone:013-add-text-contents-hash-option
TheZone:013-arena-align-cache-line
TheZone:013-measure-text-string-slice
TheZone:013-expose-bounding-boxes
TheZone:013-split-padding-values
TheZone:013-fix-newline-handling
TheZone:v0.13
TheZone:v0.12
TheZone:v0.11
TheZone:v0.10

2 Commits
e5fa3b90d0 ... d33896992f

Author SHA1 Message Date
arnau.nau
d33896992f
[Examples/SDL3] Add thickness value to demo border objects. 2025-01-26 00:41:44 +01:00
arnau.nau
8c4be7ea70
[Renderers/SDL3] Fix corner thickness draw direction + artifacts on large thickness values. 2025-01-25 23:09:02 +01:00
2 changed files with 41 additions and 28 deletions
Show Stats Expand all files Collapse all files

13
examples/SDL3-simple-demo/main.c
View File

@ -48,13 +48,13 @@ static void Label(const Clay_String text, const int cornerRadius)
} }
} }
static void LabelBorder(const Clay_String text, const int cornerRadius) static void LabelBorder(const Clay_String text, const int cornerRadius, const int thickness)
{ {
CLAY( CLAY(
CLAY_LAYOUT({ CLAY_LAYOUT({
.padding = {8, 8} }), .padding = {16, 16, 8, 8 } }),
CLAY_BORDER_OUTSIDE_RADIUS( CLAY_BORDER_OUTSIDE_RADIUS(
2, thickness,
COLOR_BLUE, COLOR_BLUE,
cornerRadius) cornerRadius)
){ ){
@ -92,11 +92,12 @@ static Clay_RenderCommandArray Clay_CreateLayout()
.color = COLOR_LIGHT, .color = COLOR_LIGHT,
}) })
) { ) {
Label(CLAY_STRING("Rounded - Button 1"), 5); Label(CLAY_STRING("Rounded - Button 1"), 10);
Label(CLAY_STRING("Straight - Button 2") , 0); Label(CLAY_STRING("Straight - Button 2") , 0);
Label(CLAY_STRING("Rounded+ - Button 3") , 20); Label(CLAY_STRING("Rounded+ - Button 3") , 20);
LabelBorder(CLAY_STRING("Border - Button 4"), 0); LabelBorder(CLAY_STRING("Border - Button 4"), 0, 5);
LabelBorder(CLAY_STRING("RoundedBorder - Button 5"), 10); LabelBorder(CLAY_STRING("RoundedBorder - Button 5"), 10, 5);
LabelBorder(CLAY_STRING("RoundedBorder - Button 6"), 40, 15);
} }
return Clay_EndLayout(); return Clay_EndLayout();
} }

56
renderers/SDL3/clay_renderer_SDL3.c
View File

@ -118,16 +118,20 @@ static void SDL_RenderArc(SDL_Renderer *renderer, const SDL_FPoint center, const
const float radStart = startAngle * (SDL_PI_F / 180.0f); const float radStart = startAngle * (SDL_PI_F / 180.0f);
const float radEnd = endAngle * (SDL_PI_F / 180.0f); const float radEnd = endAngle * (SDL_PI_F / 180.0f);
const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)(radius * 0.5f)); const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)(radius * 1.5f)); //increase circle segments for larger circles, 1.5 is arbitrary.
const float angleStep = (radEnd - radStart) / numCircleSegments; const float angleStep = (radEnd - radStart) / (float)numCircleSegments;
const float halfThickness = thickness * 0.5f; const float thicknessStep = 0.4f; //arbitrary value to avoid overlapping lines. Changing THICKNESS_STEP or numCircleSegments might cause artifacts.
for (float t = -halfThickness; t < halfThickness-0.5f; t += 0.5f) {
for (float t = thicknessStep; t < thickness - thicknessStep; t += thicknessStep) {
SDL_FPoint points[numCircleSegments + 1]; SDL_FPoint points[numCircleSegments + 1];
const float clampedRadius = SDL_max(radius - t, 1.0f);
for (int i = 0; i <= numCircleSegments; i++) { for (int i = 0; i <= numCircleSegments; i++) {
const float angle = radStart + i * angleStep; const float angle = radStart + i * angleStep;
points[i] = (SDL_FPoint){ center.x + SDL_cosf(angle) * (radius + t), center.y + SDL_sinf(angle) * (radius + t) }; points[i] = (SDL_FPoint){
SDL_roundf(center.x + SDL_cosf(angle) * clampedRadius),
SDL_roundf(center.y + SDL_sinf(angle) * clampedRadius) };
} }
SDL_RenderLines(renderer, points, numCircleSegments + 1); SDL_RenderLines(renderer, points, numCircleSegments + 1);
} }
@ -176,50 +180,58 @@ static void SDL_RenderClayCommands(SDL_Renderer *renderer, Clay_RenderCommandArr
.bottomRight = SDL_min(config->cornerRadius.bottomRight, minRadius) .bottomRight = SDL_min(config->cornerRadius.bottomRight, minRadius)
}; };
//edges //edges
SDL_SetRenderDrawColor(renderer, config->left.color.r, config->left.color.g, config->left.color.b, config->left.color.a);
if (config->left.width > 0) { if (config->left.width > 0) {
const float starting_y = rect.y + (float)clampedRadii.topLeft; const float starting_y = rect.y + clampedRadii.topLeft;
const float length = rect.h - (float)clampedRadii.topLeft - (float)clampedRadii.bottomLeft; const float length = rect.h - clampedRadii.topLeft - clampedRadii.bottomLeft;
SDL_FRect line = { rect.x, starting_y, config->left.width, length }; SDL_FRect line = { rect.x, starting_y, config->left.width, length };
SDL_SetRenderDrawColor(renderer, config->left.color.r, config->left.color.g, config->left.color.b, config->left.color.a);
SDL_RenderFillRect(renderer, &line); SDL_RenderFillRect(renderer, &line);
} }
if (config->right.width > 0) { if (config->right.width > 0) {
const float starting_x = rect.x + rect.w - (float)config->right.width; const float starting_x = rect.x + rect.w - (float)config->right.width;
const float starting_y = rect.y + (float)clampedRadii.topRight; const float starting_y = rect.y + clampedRadii.topRight;
const float length = rect.h - (float)clampedRadii.topRight - (float)clampedRadii.bottomRight; const float length = rect.h - clampedRadii.topRight - clampedRadii.bottomRight;
SDL_FRect line = { starting_x, starting_y, config->right.width, length }; SDL_FRect line = { starting_x, starting_y, config->right.width, length };
SDL_RenderFillRect(renderer, &line); SDL_RenderFillRect(renderer, &line);
} }
if (config->top.width > 0) { if (config->top.width > 0) {
const float starting_x = rect.x + (float)clampedRadii.topLeft; const float starting_x = rect.x + clampedRadii.topLeft;
const float length = rect.w - (float)clampedRadii.topLeft - (float)clampedRadii.topRight; const float length = rect.w - clampedRadii.topLeft - clampedRadii.topRight;
SDL_FRect line = { starting_x, rect.y, length, config->top.width }; SDL_FRect line = { starting_x, rect.y, length, config->top.width };
SDL_RenderFillRect(renderer, &line); SDL_RenderFillRect(renderer, &line);
} }
if (config->bottom.width > 0) { if (config->bottom.width > 0) {
const float starting_x = rect.x + (float)clampedRadii.bottomLeft; const float starting_x = rect.x + clampedRadii.bottomLeft;
const float starting_y = rect.y + rect.h - (float)config->bottom.width; const float starting_y = rect.y + rect.h - (float)config->bottom.width;
const float length = rect.w - (float)clampedRadii.bottomLeft - (float)clampedRadii.bottomRight; const float length = rect.w - clampedRadii.bottomLeft - clampedRadii.bottomRight;
SDL_FRect line = { starting_x, starting_y, length, config->bottom.width }; SDL_FRect line = { starting_x, starting_y, length, config->bottom.width };
SDL_SetRenderDrawColor(renderer, config->bottom.color.r, config->bottom.color.g, config->bottom.color.b, config->bottom.color.a); SDL_SetRenderDrawColor(renderer, config->bottom.color.r, config->bottom.color.g, config->bottom.color.b, config->bottom.color.a);
SDL_RenderFillRect(renderer, &line); SDL_RenderFillRect(renderer, &line);
} }
//corners //corners
if (config->cornerRadius.topLeft > 0) { if (config->cornerRadius.topLeft > 0) {
SDL_RenderArc(renderer, (SDL_FPoint){rect.x + clampedRadii.topLeft, rect.y + clampedRadii.topLeft}, const float centerX = rect.x + clampedRadii.topLeft -1;
clampedRadii.topLeft, 180.0f, 270.0f, config->top.width, config->top.color); const float centerY = rect.y + clampedRadii.topLeft;
SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.topLeft,
180.0f, 270.0f, config->top.width, config->top.color);
} }
if (config->cornerRadius.topRight > 0) { if (config->cornerRadius.topRight > 0) {
SDL_RenderArc(renderer, (SDL_FPoint){rect.x + rect.w - clampedRadii.topRight - config->right.width, rect.y + clampedRadii.topRight}, const float centerX = rect.x + rect.w - clampedRadii.topRight -1;
clampedRadii.topRight, 270.0f, 360.0f, config->top.width, config->top.color); const float centerY = rect.y + clampedRadii.topRight;
SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.topRight,
270.0f, 360.0f, config->top.width, config->top.color);
} }
if (config->cornerRadius.bottomLeft > 0) { if (config->cornerRadius.bottomLeft > 0) {
SDL_RenderArc(renderer, (SDL_FPoint){rect.x + clampedRadii.bottomLeft, rect.y + rect.h - clampedRadii.bottomLeft - config->bottom.width}, const float centerX = rect.x + clampedRadii.bottomLeft -1;
clampedRadii.bottomLeft, 90.0f, 180.0f, config->bottom.width, config->bottom.color); const float centerY = rect.y + rect.h - clampedRadii.bottomLeft -1;
SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomLeft,
90.0f, 180.0f, config->bottom.width, config->bottom.color);
} }
if (config->cornerRadius.bottomRight > 0) { if (config->cornerRadius.bottomRight > 0) {
SDL_RenderArc(renderer, (SDL_FPoint){rect.x + rect.w - clampedRadii.bottomRight - config->left.width, rect.y + rect.h - clampedRadii.bottomRight - config->bottom.width}, const float centerX = rect.x + rect.w - clampedRadii.bottomRight -1; //TODO: why need to -1 in all calculations???
clampedRadii.bottomRight, 0.0f, 90.0f, config->bottom.width, config->bottom.color); const float centerY = rect.y + rect.h - clampedRadii.bottomRight -1;
SDL_RenderArc(renderer, (SDL_FPoint){centerX, centerY}, clampedRadii.bottomRight,
0.0f, 90.0f, config->bottom.width, config->bottom.color);
} }
} break; } break;