8000 fix(ios): anti-aliasing for accurate borders (#10619) · NativeScript/NativeScript@4f46815 · GitHub
[go: up one dir, main page]

Skip to content

Commit 4f46815

Browse files
authored
fix(ios): anti-aliasing for accurate borders (#10619)
1 parent 8e5249e commit 4f46815

File tree

1 file changed

+12
-11
lines changed

1 file changed

+12
-11
lines changed

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

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

726726
function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void {
727727
const layer: CALayer = nativeView.layer;
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);
728+
const layerBounds = layer.bounds;
734729

735730
layer.borderColor = null;
736731
layer.borderWidth = 0;
737732
layer.cornerRadius = 0;
738733

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

744739
if (background.hasBorderWidth()) {
@@ -750,15 +745,21 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
750745
}
751746

752747
if (background.hasUniformBorderColor()) {
748+
// Use anti-aliasing or borders will draw incorrectly at times
749+
nativeView.borderLayer.shouldRasterize = true;
750+
nativeView.borderLayer.rasterizationScale = Screen.mainScreen.scale;
753751
nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
754-
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
752+
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
755753
} else {
756754
// Non-uniform borders need more layers in order to display multiple colors at the same time
757755
let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
758756

759757
if (!nativeView.hasNonUniformBorderColor) {
760758
const maskLayer = CAShapeLayer.new();
761759
maskLayer.fillRule = kCAFillRuleEvenOdd;
760+
// Use anti-aliasing or borders will draw incorrectly at times
761+
maskLayer.shouldRasterize = true;
762+
maskLayer.rasterizationScale = Screen.mainScreen.scale;
762763
nativeView.borderLayer.mask = maskLayer;
763764

764765
borderTopLayer = CAShapeLayer.new();
@@ -779,7 +780,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
779780
borderLeftLayer = nativeView.borderLayer.sublayers[3];
780781
}
781782

782-
const paths = generateNonUniformMultiColorBorderPaths(drawingBounds, background);
783+
const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background);
783784

784785
borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
785786
borderTopLayer.path = paths[0];
@@ -792,7 +793,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
792793

793794
// Clip inner area to create borders
794795
if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
795-
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
796+
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
796797
}
797798
}
798799
}

0 commit comments

Comments
 (0)
0