Fix iOS Metal and Android SVG rendering bugs exposed by PR #5042

Three rendering-layer bugs the SVGStaticScreenshotTest / SVGAnimatedScreenshotTest
captured in their goldens, now fixed at the port level so the goldens can be
retaken on top:

1. iOS Metal clip on arc-decomposed paths -- gradient_circle.svg and
   clipped_badge.svg rendered as triangles. setClip(GeneralPath)'s native
   side (setNativeClippingShapeMutableImpl and setNativeClippingPolygonGlobalImpl)
   ignores the path command stream and treats the raw points buffer as a
   flat polygon. For a path with QUADTO segments, every control point
   appears as a polygon vertex, and the stencil triangle-fan that
   CN1MetalApplyPolygonStencilClip uses produces the degenerate triangle.
   Fix at the Java boundary: flatten any non-rect ClipShape via midpoint
   subdivision into a polyline GeneralPath before sending it down, so
   only true polygon vertices reach the native side. Works for both the
   global and mutable-image paths.

2. iOS Metal drawString skips the affine scale -- CoreText shapes the
   line and the atlas rasterises glyphs at font.pointSize, so a quad
   stretched by a 2x-4x viewBox transform smears the bitmap on the GPU.
   CN1MetalDrawString now reads the effective screen scale from
   currentTransform (column magnitudes of the 2x2), rasterises the atlas
   at font.pointSize * scale via [font fontWithSize:...], and divides
   every glyph position / bearing / bbox / slot dimension by the same
   factor so the vertex coords stay in caller-side space. The vertex
   shader re-applies the same scale via the transform and the result is
   a 1:1 atlas sample. Pure rotation / translation keeps the fast
   useScaledFont == NO path.

3. Android (and iOS Metal once #1 unmasked it) gradient_circle.svg
   double-circle -- the gradient fill landed below the dark-blue
   stroke instead of inside it. LinearGradientPaint.paint(g, w, h)
   captured g.getTranslateX()/Y(), zeroed them out, and baked them into
   t2 via t2.translate(startX + tx, startY + ty). On every active port
   (isTranslationSupported() == false) Graphics.setTransform already
   conjugates the user matrix with T(xTranslate) so the cell offset
   applies at the screen level; baking tx/ty inside a translate that
   sits before the SVG scale meant the offset went through that scale
   twice (sy * label_Y extra) and slid the gradient fill off the
   circle. Drop the dance entirely -- build t2 as
   T * Translate(startX, startY) * Rotate * Translate(0, -ph/2) and let
   the existing conjugation re-apply the screen-level offset.

Also drops the "Known port-side rendering bugs the goldens encode" block
from SVGStaticScreenshotTest's javadoc -- those items are this PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: shai-almog

CodenameOne/src/com/codename1/ui/LinearGradientPaint.java

@@ -181,7 +181,6 @@ private float[] reverseFractions() {
     @Override
     @SuppressWarnings("UnusedFormalParameter")
     public void paint(Graphics g, double x, double y, double w, double h) {
-        // TODO: x and y probably need to be taken into consideration here...
         paint(g, w, h, true);
     }
 
@@ -200,11 +199,26 @@ private void paint(Graphics g, double w, double h, boolean processCycles) {
         if (getTransform() != null) {
             t2.concatenate(getTransform());
         }
-        int tx = g.getTranslateX();
-        int ty = g.getTranslateY();
-        g.translate(-tx, -ty);
-
-        t2.translate((float) (startX + tx), (float) (startY + ty));
+        // Build the gradient frame on top of the caller's transform. The
+        // previous version captured `g.getTranslateX()/getTranslateY()` and
+        // baked them into `t2.translate(startX + tx, startY + ty)`, then
+        // zeroed `g.translate(-tx, -ty)` before `g.setTransform(t2)`. On
+        // ports where `isTranslationSupported()` is false (iOS, Android,
+        // JavaSE — every active port today), Graphics already conjugates
+        // setTransform with `T(xTranslate)` so the user matrix operates in
+        // local coordinates regardless of prior g.translate; that
+        // conjugation re-applies the cell offset at the *screen* level
+        // automatically. Baking `tx, ty` into a translate that sits
+        // *inside* the SVG / theme scale meant the cell offset went
+        // through the scale a second time, shifting the gradient fill
+        // away from the stroke. Most visible on SVGStaticScreenshotTest's
+        // gradient_circle, where the filled circle appeared stacked below
+        // the dark-blue outline on Android (and would have appeared the
+        // same on iOS Metal once the triangle-clip bug was unmasked).
+        // Just build `t * Translate(startX, startY) * Rotate * Translate(0,
+        // -ph/2)` and let Graphics.setTransform's existing conjugation
+        // restore the screen-level offset.
+        t2.translate((float) startX, (float) startY);
         t2.rotate((float) theta, 0, 0);
         t2.translate(0, -(float) ph / 2);
 
@@ -293,7 +307,6 @@ private void paint(Graphics g, double w, double h, boolean processCycles) {
         }*/
         g.setAlpha(alpha);
         g.setTransform(t);
-        g.translate(tx, ty);
         if (p != null) {
             g.setColor(p);
         }

Ports/iOSPort/nativeSources/CN1Metalcompat.m

@@ -755,13 +755,74 @@ void CN1MetalTileImage(id<MTLTexture> texture, int alpha,
 // the failure rather than papering over it with a different pipeline
 // that would silently mask the bug.
 
+// Returns the effective screen-pixel scale baked into the current
+// transform. The vertex shader applies `projection * modelView *
+// transform * pos`; projection / modelView are stable per frame and
+// expressed in framebuffer units, so any *additional* scaling comes
+// from `currentTransform`. For text rendering we want to know that
+// effective scale up front so the glyph atlas can rasterise at the
+// matching pixel size; otherwise the atlas glyph art (rasterised at
+// font.pointSize) is sampled through a stretched quad and the glyph
+// turns into a smear at every `g.setTransform(scale)` site -- e.g.
+// the SVG transcoder painting `<text>` under a viewBox-to-display
+// scale, which is the most visible offender.
+//
+// Pulls a uniform scale by averaging the magnitudes of the two basis
+// vectors of the upper-left 2x2 (sx along the X column, sy along the
+// Y column). Shear-only or pure-rotation matrices return 1 because
+// both column magnitudes stay at 1; pure scale returns the scale.
+// We do *not* try to handle non-uniform scale separately -- the
+// glyph atlas slot key is one float (pointSize), so even if the
+// SVG draws with sx != sy we have to pick one. Going with the
+// geometric mean keeps the rasterised glyph close to either bound
+// and the residual GPU stretch only kicks in along the dimension
+// that's farther from the mean.
+static inline float currentTransformGlyphScale(void) {
+    float c0x = currentTransform.columns[0].x;
+    float c0y = currentTransform.columns[0].y;
+    float c1x = currentTransform.columns[1].x;
+    float c1y = currentTransform.columns[1].y;
+    float sx = sqrtf(c0x * c0x + c0y * c0y);
+    float sy = sqrtf(c1x * c1x + c1y * c1y);
+    // Cap at 8x to keep the atlas from rasterising absurdly large
+    // bitmaps for a runaway transform; well past 8x the difference
+    // between "atlas-perfect" and "sampled-and-filtered" is below
+    // what the user can see anyway.
+    float s = (sx + sy) * 0.5f;
+    if (s < 1.0f) s = 1.0f;     // No down-rasterising; 1px atlas is fine for downscale.
+    if (s > 8.0f) s = 8.0f;
+    return s;
+}
+
 void CN1MetalDrawString(NSString *str, UIFont *font, int color, int alpha, int x, int y) {
     if (str == nil || font == nil || str.length == 0) return;
 
-    CN1MetalGlyphAtlas *atlas = [CN1MetalGlyphAtlas atlasForFont:font];
+    // CoreText shapes glyphs and the atlas rasterises them at font.pointSize
+    // — but the active Graphics transform may be scaling the whole drawing
+    // up before the framebuffer write. If we hand the shader a quad sized to
+    // the unscaled glyph and let the transform stretch it on the GPU, the
+    // result is a smeared/blurry glyph (Codename One's SVG transcoder paints
+    // viewBox-relative text through `g.setTransform(scale*translate)`, so the
+    // screen scale is routinely 2x-4x). Detect the scale baked into
+    // `currentTransform` and rasterise the atlas at the effective pixel size
+    // so the shader transform produces a 1:1 sample. We then divide the
+    // returned glyph metrics back down by the same factor so the vertex
+    // coords stay in unscaled space — the GPU re-applies `currentTransform`
+    // for free and the final on-screen position matches the unscaled path.
+    float glyphScale = currentTransformGlyphScale();
+    BOOL useScaledFont = (glyphScale > 1.01f);
+    UIFont *renderFont = useScaledFont
+        ? [font fontWithSize:font.pointSize * glyphScale]
+        : font;
+    if (renderFont == nil) {
+        renderFont = font;
+        useScaledFont = NO;
+    }
+
+    CN1MetalGlyphAtlas *atlas = [CN1MetalGlyphAtlas atlasForFont:renderFont];
     if (atlas == nil) {
         NSLog(@"CN1MetalDrawString: no atlas available for font %@ pt=%g; string skipped",
-              font.fontName, (double)font.pointSize);
+              renderFont.fontName, (double)renderFont.pointSize);
         return;
     }
 
@@ -774,7 +835,7 @@ void CN1MetalDrawString(NSString *str, UIFont *font, int color, int alpha, int x
     // fresh form, which surfaced as the TL panel of graphics-draw-string-
     // decorated rendering larger/wider glyphs than TR/BL/BR despite
     // identical Java state.
-    NSDictionary *attrs = @{ (__bridge NSString *)kCTFontAttributeName: font };
+    NSDictionary *attrs = @{ (__bridge NSString *)kCTFontAttributeName: renderFont };
     CFAttributedStringRef attrStr = CFAttributedStringCreate(NULL,
                                                              (__bridge CFStringRef)str,
                                                              (__bridge CFDictionaryRef)attrs);
@@ -798,7 +859,14 @@ void CN1MetalDrawString(NSString *str, UIFont *font, int color, int alpha, int x
     // (not CTFontGetAscent) is intentional — UIKit's metric is what
     // drawAtPoint references and the values can disagree slightly across
     // fonts.
+    //
+    // Use the ORIGINAL font's ascender (and the original pointSize) so the
+    // baseline lands where the caller-side framework expects, even when we
+    // upscaled the atlas. The atlas-internal metrics (renderFont) reflect
+    // the rasterised size; we divide them by `glyphScale` below to bring
+    // them back into caller-side coords.
     float baselineY = (float)y + (float)font.ascender;
+    float invScale = useScaledFont ? (1.0f / glyphScale) : 1.0f;
 
     simd_float4 colorV = premultipliedColor(color, alpha);
     int textureW = atlas.textureWidth;
@@ -838,11 +906,24 @@ void CN1MetalDrawString(NSString *str, UIFont *font, int color, int alpha, int x
             //   bbox-left-on-screen  = x + posX + bearingX
             //   bbox-top-on-screen   = baselineY - posY - (bearingY + bbox.height)
             // Slot extends 1px above and to the left of the bbox.
-            float gx = (float)x + (float)posPtr[i].x + slot.bearingX - 1.0f;
-            float gy = baselineY - (float)posPtr[i].y
-                       - (slot.bearingY + slot.bboxHeight) - 1.0f;
-            float gw = (float)slot.width;
-            float gh = (float)slot.height;
+            //
+            // When the atlas was rasterised at the upscaled size, the
+            // CoreText positions and slot metrics are in renderFont-pixel
+            // space (which is glyphScale times the caller-side pixel space).
+            // Divide each one back down by glyphScale so the emitted vertex
+            // coords live in caller-side space — the vertex shader will
+            // re-apply currentTransform (the same scale we factored out) and
+            // produce a quad of the correct on-screen size, sampling
+            // 1:1 against the now-matching atlas.
+            float posX = (float)posPtr[i].x * invScale;
+            float posY = (float)posPtr[i].y * invScale;
+            float bearingX = slot.bearingX * invScale;
+            float bearingY = slot.bearingY * invScale;
+            float bboxHeight = slot.bboxHeight * invScale;
+            float gx = (float)x + posX + bearingX - invScale;
+            float gy = baselineY - posY - (bearingY + bboxHeight) - invScale;
+            float gw = (float)slot.width * invScale;
+            float gh = (float)slot.height * invScale;
 
             float vertices[8] = {
                 gx,        gy,