8000 fix(ios): proper drawing bounds for colored borders (#10600) · NativeScript/NativeScript@75c8e94 · GitHub
[go: up one dir, main page]

Skip to content

Commit 75c8e94

Browse files
authored
fix(ios): proper drawing bounds for colored borders (#10600)
1 parent f7b9d06 commit 75c8e94

File tree

1 file changed

+11
-6
lines changed

1 file changed

+11
-6
lines changed

packages/core/ui/styling/background.ios.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -725,15 +725,20 @@ function calculateNonUniformBorderCappedRadii(bounds: CGRect, background: Backgr
725725

726726
function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void {
727727
const layer: CALayer = nativeView.layer;
728-
const layerBounds = layer.bounds;
728+
// There are some cases like drawing when Core Animation API has trouble with fractional coordinates,
729+
// so get the difference between the fractional and integral origin points and use it as offset
730+
const { x: frameX, y: frameY } = layer.frame.origin;
731+
const offsetX = Math.round(frameX) - frameX;
732+
const offsetY = Math.round(frameY) - frameY;
733+
const drawingBounds = CGRectOffset(layer.bounds, offsetX, offsetY);
729734

730735
layer.borderColor = null;
731736
layer.borderWidth = 0;
732737
layer.cornerRadius = 0;
733738

734-
const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background);
739+
const cappedOuterRadii = calculateNonUniformBorderCappedRadii(drawingBounds, background);
735740
if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) {
736-
layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii);
741+
layer.mask.path = generateNonUniformBorderOuterClipPath(drawingBounds, cappedOuterRadii);
737742
}
738743

739744
if (background.hasBorderWidth()) {
@@ -746,7 +751,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
746751

747752
if (background.hasUniformBorderColor()) {
748753
nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
749-
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
754+
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
750755
} else {
751756
// Non-uniform borders need more layers in order to display multiple colors at the same time
752757
let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
@@ -774,7 +779,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
774779
borderLeftLayer = nativeView.borderLayer.sublayers[3];
775780
}
776781

777-
const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background);
782+
const paths = generateNonUniformMultiColorBorderPaths(drawingBounds, background);
778783

779784
borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
780785
borderTopLayer.path = paths[0];
@@ -787,7 +792,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
787792

788793
// Clip inner area to create borders
789794
if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
790-
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
795+
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
791796
}
792797
}
793798
}

0 commit comments

Comments
 (0)
0