mirror of
				https://github.com/nicbarker/clay.git
				synced 2025-11-04 00:26:17 +00:00 
			
		
		
		
	added rounded corner borders and fixed other issues
This commit is contained in:
		
							parent
							
								
									bc2548e3ec
								
							
						
					
					
						commit
						938c48d0b8
					
				| 
						 | 
				
			
			@ -4,6 +4,10 @@
 | 
			
		|||
#include <SDL_image.h>
 | 
			
		||||
#include <stdio.h>
 | 
			
		||||
 | 
			
		||||
#ifndef M_PI
 | 
			
		||||
    #define M_PI 3.14159
 | 
			
		||||
#endif
 | 
			
		||||
 | 
			
		||||
#define CLAY_COLOR_TO_SDL_COLOR_ARGS(color) color.r, color.g, color.b, color.a
 | 
			
		||||
 | 
			
		||||
typedef struct
 | 
			
		||||
| 
						 | 
				
			
			@ -48,8 +52,8 @@ static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect re
 | 
			
		|||
 | 
			
		||||
    int indexCount = 0, vertexCount = 0;
 | 
			
		||||
 | 
			
		||||
    const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
 | 
			
		||||
    const float clampedRadius = SDL_min(cornerRadius, minRadius);
 | 
			
		||||
    const float maxRadius = SDL_min(rect.w, rect.h) / 2.0f;
 | 
			
		||||
    const float clampedRadius = SDL_min(cornerRadius, maxRadius);
 | 
			
		||||
 | 
			
		||||
    const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)clampedRadius * 0.5f);
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -141,6 +145,121 @@ static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect re
 | 
			
		|||
    SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
//all rendering is performed by a single SDL call, using twi sets of arcing triangles, inner and outer, that fit together; along with two tringles to fill the end gaps.
 | 
			
		||||
void SDL_RenderCornerBorder(SDL_Renderer *renderer, Clay_BoundingBox* boundingBox, Clay_BorderRenderData* config, int cornerIndex, Clay_Color _color){
 | 
			
		||||
    /////////////////////////////////
 | 
			
		||||
    //The arc is constructed of outer triangles and inner triangles (if needed).
 | 
			
		||||
    //First three vertices are first outer triangle's vertices
 | 
			
		||||
    //Each two vertices after that are the inner-middle and second-outer vertex of 
 | 
			
		||||
    //each outer triangle after the first, because there first-outer vertex is equal to the
 | 
			
		||||
    //second-outer vertex of the previous triangle. Indices set accordingly.
 | 
			
		||||
    //The final two vertices are the missing vertices for the first and last inner triangles (if needed)
 | 
			
		||||
    //Everything is in clockwise order (CW).
 | 
			
		||||
    /////////////////////////////////
 | 
			
		||||
    const SDL_Color color = (SDL_Color) {
 | 
			
		||||
        .r = (Uint8)_color.r,
 | 
			
		||||
        .g = (Uint8)_color.g,
 | 
			
		||||
        .b = (Uint8)_color.b,
 | 
			
		||||
        .a = (Uint8)_color.a,
 | 
			
		||||
    };
 | 
			
		||||
 | 
			
		||||
    float centerX, centerY, outerRadius, clampedRadius, startAngle, borderWidth;
 | 
			
		||||
    const float maxRadius = SDL_min(boundingBox->width, boundingBox->height) / 2.0f;
 | 
			
		||||
    
 | 
			
		||||
    SDL_Vertex vertices[512];
 | 
			
		||||
    int indices[512];
 | 
			
		||||
    int indexCount = 0, vertexCount = 0;
 | 
			
		||||
 | 
			
		||||
    switch (cornerIndex) {
 | 
			
		||||
        case(0):
 | 
			
		||||
            startAngle = M_PI; 
 | 
			
		||||
            outerRadius = SDL_min(config->cornerRadius.topLeft, maxRadius);
 | 
			
		||||
            centerX = boundingBox->x + outerRadius; 
 | 
			
		||||
            centerY = boundingBox->y + outerRadius; 
 | 
			
		||||
            borderWidth = config->width.top;
 | 
			
		||||
        break;
 | 
			
		||||
        case(1):
 | 
			
		||||
            startAngle = 3*M_PI/2;
 | 
			
		||||
            outerRadius = SDL_min(config->cornerRadius.topRight, maxRadius);
 | 
			
		||||
            centerX = boundingBox->x + boundingBox->width - outerRadius; 
 | 
			
		||||
            centerY = boundingBox->y + outerRadius; 
 | 
			
		||||
            borderWidth = config->width.top;
 | 
			
		||||
            break;
 | 
			
		||||
        case(2):
 | 
			
		||||
            startAngle = 0;
 | 
			
		||||
            outerRadius = SDL_min(config->cornerRadius.bottomRight, maxRadius);
 | 
			
		||||
            centerX = boundingBox->x + boundingBox->width - outerRadius; 
 | 
			
		||||
            centerY = boundingBox->y + boundingBox->height - outerRadius; 
 | 
			
		||||
            borderWidth = config->width.bottom;
 | 
			
		||||
            break;
 | 
			
		||||
        case(3):
 | 
			
		||||
            startAngle = M_PI/2;
 | 
			
		||||
            outerRadius = SDL_min(config->cornerRadius.bottomLeft, maxRadius);
 | 
			
		||||
            centerX = boundingBox->x + outerRadius; 
 | 
			
		||||
            centerY = boundingBox->y + boundingBox->height - outerRadius; 
 | 
			
		||||
            borderWidth = config->width.bottom;
 | 
			
		||||
            break;
 | 
			
		||||
        default: break;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    const float innerRadius = outerRadius - borderWidth;
 | 
			
		||||
    const int minNumOuterTriangles = NUM_CIRCLE_SEGMENTS;
 | 
			
		||||
    const int numOuterTriangles = SDL_max(minNumOuterTriangles, ceilf(outerRadius * 0.5f));
 | 
			
		||||
    const float angleStep = M_PI / (2.0*(float)numOuterTriangles);
 | 
			
		||||
 | 
			
		||||
    //outer triangles, in CW order
 | 
			
		||||
    for (int i = 0; i < numOuterTriangles; i++) { 
 | 
			
		||||
        float angle1 =  startAngle + i*angleStep; //first-outer vertex angle
 | 
			
		||||
        float angle2 =  startAngle + ((float)i + 0.5) * angleStep; //inner-middle vertex angle
 | 
			
		||||
        float angle3 =  startAngle + (i+1)*angleStep; // second-outer vertex angle
 | 
			
		||||
 | 
			
		||||
        if( i == 0){ //first outer triangle
 | 
			
		||||
            vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(angle1) * outerRadius, centerY + SDL_sinf(angle1) * outerRadius}, color, {0, 0} }; //vertex index = 0
 | 
			
		||||
        }
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1; //will be second-outer vertex of last outer triangle if not first outer triangle.
 | 
			
		||||
 | 
			
		||||
        vertices[vertexCount++] = (innerRadius > 0)?
 | 
			
		||||
            (SDL_Vertex){ {centerX + SDL_cosf(angle2) * (innerRadius), centerY + SDL_sinf(angle2) * (innerRadius)}, color, {0, 0}}:
 | 
			
		||||
            (SDL_Vertex){ {centerX, centerY }, color, {0, 0}};
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1;
 | 
			
		||||
 | 
			
		||||
        vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(angle3) * outerRadius, centerY + SDL_sinf(angle3) * outerRadius}, color, {0, 0} };
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    if(innerRadius > 0){
 | 
			
		||||
        // inner triangles in CW order (except the first and last)
 | 
			
		||||
        for (int i = 0; i < numOuterTriangles - 1; i++){ //skip the last outer triangle
 | 
			
		||||
            if(i==0){ //first outer triangle -> second inner triangle
 | 
			
		||||
                indices[indexCount++] = 1; //inner-middle vertex of first outer triangle
 | 
			
		||||
                indices[indexCount++] = 2; //second-outer vertex of first outer triangle
 | 
			
		||||
                indices[indexCount++] = 3; //innder-middle vertex of second-outer triangle
 | 
			
		||||
            }else{
 | 
			
		||||
                int baseIndex = 3; //skip first outer triangle
 | 
			
		||||
                indices[indexCount++] = baseIndex + (i-1)*2; // inner-middle vertex of current outer triangle
 | 
			
		||||
                indices[indexCount++] = baseIndex + (i-1)*2 + 1; // second-outer vertex of current outer triangle
 | 
			
		||||
                indices[indexCount++] = baseIndex + (i-1)*2 + 2; // inner-middle vertex of next outer triangle
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        float endAngle = startAngle + M_PI/2.0;
 | 
			
		||||
 | 
			
		||||
        //last inner triangle
 | 
			
		||||
        indices[indexCount++] = vertexCount - 2; //inner-middle vertex of last outer triangle
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1; //second-outer vertex of last outer triangle
 | 
			
		||||
        vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(endAngle) * innerRadius, centerY + SDL_sinf(endAngle) * innerRadius}, color, {0, 0} }; //missing vertex
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1; 
 | 
			
		||||
        
 | 
			
		||||
        // //first inner triangle
 | 
			
		||||
        indices[indexCount++] = 0; //first-outer vertex of first outer triangle
 | 
			
		||||
        indices[indexCount++] = 1; //inner-middle vertex of first outer triangle
 | 
			
		||||
        vertices[vertexCount++] = (SDL_Vertex){ {centerX + SDL_cosf(startAngle) * innerRadius, centerY + SDL_sinf(startAngle) * innerRadius}, color, {0, 0} }; //missing vertex
 | 
			
		||||
        indices[indexCount++] = vertexCount - 1; 
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
SDL_Rect currentClippingRectangle;
 | 
			
		||||
 | 
			
		||||
static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray renderCommands, SDL2_Font *fonts)
 | 
			
		||||
| 
						 | 
				
			
			@ -228,37 +347,76 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
 | 
			
		|||
            }
 | 
			
		||||
            case CLAY_RENDER_COMMAND_TYPE_BORDER: {
 | 
			
		||||
                Clay_BorderRenderData *config = &renderCommand->renderData.border;
 | 
			
		||||
                SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
 | 
			
		||||
                if(boundingBox.width > 0 & boundingBox.height > 0){
 | 
			
		||||
                    const float maxRadius = SDL_min(boundingBox.width, boundingBox.height) / 2.0f;
 | 
			
		||||
 | 
			
		||||
                    if (config->width.left > 0) {
 | 
			
		||||
                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
                    SDL_FRect rect = { boundingBox.x, boundingBox.y + config->cornerRadius.topLeft, config->width.left, boundingBox.height - config->cornerRadius.topLeft - config->cornerRadius.bottomLeft };
 | 
			
		||||
                        const float clampedRadiusTop = SDL_min((float)config->cornerRadius.topLeft, maxRadius);
 | 
			
		||||
                        const float clampedRadiusBottom = SDL_min((float)config->cornerRadius.bottomLeft, maxRadius);
 | 
			
		||||
                        SDL_FRect rect = { 
 | 
			
		||||
                            boundingBox.x, 
 | 
			
		||||
                            boundingBox.y + clampedRadiusTop, 
 | 
			
		||||
                            (float)config->width.left, 
 | 
			
		||||
                            (float)boundingBox.height - clampedRadiusTop - clampedRadiusBottom
 | 
			
		||||
                        };
 | 
			
		||||
                        SDL_RenderFillRectF(renderer, &rect);
 | 
			
		||||
                    }
 | 
			
		||||
    
 | 
			
		||||
                    if (config->width.right > 0) {
 | 
			
		||||
                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
                    SDL_FRect rect = { boundingBox.x + boundingBox.width - config->width.right, boundingBox.y + config->cornerRadius.topRight, config->width.right, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight };
 | 
			
		||||
                    SDL_RenderFillRectF(renderer, &rect);
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                if (config->width.right > 0) {
 | 
			
		||||
                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
                    SDL_FRect rect = { boundingBox.x + boundingBox.width - config->width.right, boundingBox.y + config->cornerRadius.topRight, config->width.right, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight };
 | 
			
		||||
                        const float clampedRadiusTop = SDL_min((float)config->cornerRadius.topRight, maxRadius);
 | 
			
		||||
                        const float clampedRadiusBottom = SDL_min((float)config->cornerRadius.bottomRight, maxRadius);
 | 
			
		||||
                        SDL_FRect rect = { 
 | 
			
		||||
                            boundingBox.x + boundingBox.width - config->width.right,
 | 
			
		||||
                            boundingBox.y + clampedRadiusTop,
 | 
			
		||||
                            (float)config->width.right,
 | 
			
		||||
                            (float)boundingBox.height - clampedRadiusTop - clampedRadiusBottom
 | 
			
		||||
                        };
 | 
			
		||||
                        SDL_RenderFillRectF(renderer, &rect);
 | 
			
		||||
                    }
 | 
			
		||||
    
 | 
			
		||||
                    if (config->width.top > 0) {
 | 
			
		||||
                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
                    SDL_FRect rect = { boundingBox.x + config->cornerRadius.topLeft, boundingBox.y, boundingBox.width - config->cornerRadius.topLeft - config->cornerRadius.topRight, config->width.top };
 | 
			
		||||
                        const float clampedRadiusLeft = SDL_min((float)config->cornerRadius.topLeft, maxRadius);
 | 
			
		||||
                        const float clampedRadiusRight = SDL_min((float)config->cornerRadius.topRight, maxRadius);
 | 
			
		||||
                        SDL_FRect rect = { 
 | 
			
		||||
                            boundingBox.x + clampedRadiusLeft, 
 | 
			
		||||
                            boundingBox.y, 
 | 
			
		||||
                            boundingBox.width - clampedRadiusLeft - clampedRadiusRight, 
 | 
			
		||||
                            (float)config->width.top };
 | 
			
		||||
                        SDL_RenderFillRectF(renderer, &rect);
 | 
			
		||||
                    }
 | 
			
		||||
    
 | 
			
		||||
                    if (config->width.bottom > 0) {
 | 
			
		||||
                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->color));
 | 
			
		||||
                    SDL_FRect rect = { boundingBox.x + config->cornerRadius.bottomLeft, boundingBox.y + boundingBox.height - config->width.bottom, boundingBox.width - config->cornerRadius.bottomLeft - config->cornerRadius.bottomRight, config->width.bottom };
 | 
			
		||||
                        const float clampedRadiusLeft = SDL_min((float)config->cornerRadius.bottomLeft, maxRadius);
 | 
			
		||||
                        const float clampedRadiusRight = SDL_min((float)config->cornerRadius.bottomRight, maxRadius);
 | 
			
		||||
                        SDL_FRect rect = { 
 | 
			
		||||
                            boundingBox.x + clampedRadiusLeft, 
 | 
			
		||||
                            boundingBox.y + boundingBox.height - config->width.bottom, 
 | 
			
		||||
                            boundingBox.width - clampedRadiusLeft - clampedRadiusRight, 
 | 
			
		||||
                            (float)config->width.bottom 
 | 
			
		||||
                        };
 | 
			
		||||
                        SDL_RenderFillRectF(renderer, &rect);
 | 
			
		||||
                    }
 | 
			
		||||
    
 | 
			
		||||
                    //corner index: 0->3 topLeft -> CW -> bottonLeft
 | 
			
		||||
                    if (config->width.top > 0 & config->cornerRadius.topLeft > 0) {
 | 
			
		||||
                        SDL_RenderCornerBorder(renderer, &boundingBox, config, 0, config->color);
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    if (config->width.top > 0 & config->cornerRadius.topRight> 0) {
 | 
			
		||||
                        SDL_RenderCornerBorder(renderer, &boundingBox, config, 1, config->color);
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    if (config->width.bottom > 0 & config->cornerRadius.bottomLeft > 0) {
 | 
			
		||||
                        SDL_RenderCornerBorder(renderer, &boundingBox, config, 2, config->color);
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    if (config->width.bottom > 0 & config->cornerRadius.bottomLeft > 0) {
 | 
			
		||||
                        SDL_RenderCornerBorder(renderer, &boundingBox, config, 3, config->color);
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                break;
 | 
			
		||||
            }
 | 
			
		||||
            default: {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue