From 75c8e941a021511381a0c57b7e3535551471218b Mon Sep 17 00:00:00 2001 From: Dimitris-Rafail Katsampas Date: Tue, 6 Aug 2024 01:42:13 +0300 Subject: [PATCH] fix(ios): proper drawing bounds for colored borders (#10600) --- packages/core/ui/styling/background.ios.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts index 4b0f42b6c3..8aa34e0c74 100644 --- a/packages/core/ui/styling/background.ios.ts +++ b/packages/core/ui/styling/background.ios.ts @@ -725,15 +725,20 @@ function calculateNonUniformBorderCappedRadii(bounds: CGRect, background: Backgr function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void { const layer: CALayer = nativeView.layer; - const layerBounds = layer.bounds; + // There are some cases like drawing when Core Animation API has trouble with fractional coordinates, + // so get the difference between the fractional and integral origin points and use it as offset + const { x: frameX, y: frameY } = layer.frame.origin; + const offsetX = Math.round(frameX) - frameX; + const offsetY = Math.round(frameY) - frameY; + const drawingBounds = CGRectOffset(layer.bounds, offsetX, offsetY); layer.borderColor = null; layer.borderWidth = 0; layer.cornerRadius = 0; - const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background); + const cappedOuterRadii = calculateNonUniformBorderCappedRadii(drawingBounds, background); if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) { - layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii); + layer.mask.path = generateNonUniformBorderOuterClipPath(drawingBounds, cappedOuterRadii); } if (background.hasBorderWidth()) { @@ -746,7 +751,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg if (background.hasUniformBorderColor()) { nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor; - nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii); + nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii); } else { // Non-uniform borders need more layers in order to display multiple colors at the same time let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer; @@ -774,7 +779,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg borderLeftLayer = nativeView.borderLayer.sublayers[3]; } - const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background); + const paths = generateNonUniformMultiColorBorderPaths(drawingBounds, background); borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor; borderTopLayer.path = paths[0]; @@ -787,7 +792,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg // Clip inner area to create borders if (nativeView.borderLayer.mask instanceof CAShapeLayer) { - nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii); + nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii); } } }