Repository navigation
Add drawRoundedImage for rounded-corner image drawing - #64
Merged
Merged
Conversation
Builds the shape from an inner rect, four edge rects and four triangle fans, with UVs linearly mapped from the destination rect into the atlas entry so the texture is continuous across pieces. Fan segment count is arc-length based (~2px per segment, uiScale aware) so corners stay smooth at any radius. Radius clamps to min(w, h) / 2 and falls back to a plain quad when near zero. Adds tests/manual_rounded_image.nim with width/height/radius scrubbers and a --screenshot mode that dumps the framebuffer to tmp/rounded_screenshot.png, plus the silkyTesting stub. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Adds
sk.drawRoundedImage(name, pos, size, radius, color)to draw an atlas image filling any size with rounded corners, plus a manual test. The image keeps its aspect ratio: it is scaled uniformly to cover the destination rect, centered, and the overflow is cropped (CSSobject-fit: coverbehavior).How it works
The geometry is built from nine pieces:
(r, r)to(size - r, size - r).drawTriangle.Every vertex goes through one shared linear map from the destination rect into a centered, aspect-matched sub-rect of the atlas entry, so UVs are continuous across all nine pieces — no seams or texture misalignment where the fans meet the rects, and no stretching.
Fan segment count is arc-length based: one segment per ~2px of on-screen arc (scaled by
uiScalefor retina), minimum 4, so large corners get more triangles automatically and never stair-step. Radius clamps tomin(w, h) / 2(a full clamp renders a clean circle) and radii under half a pixel fall back to a single plain quad.Also adds the matching no-op stub in
semantics.nimso thesilkyTestingbuild keeps compiling.Test
tests/manual_rounded_image.nim, modeled on the 9-patch manual test: width/height/radius scrubbers, the original 48x48debug.9patchfor reference, and the rounded version drawn below. It also accepts--screenshotto render one frame totmp/rounded_screenshot.pngand exit.Verified with framebuffer captures: wide rect (300x200, crops top/bottom), tall rect (150x400, crops left/right), and full-circle radius clamp (300x300);
nim check tests/test_semantic.nimpasses for the testing build.🤖 Generated with Claude Code