javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ios): anti-aliasing for accurate borders (#10619)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-10-31 18:16:44 +02:00
committed by GitHub
parent 8e5249ec4e
commit 4f46815b27
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/ui/styling/background.ios.ts
View File

@ -725,20 +725,15 @@ function calculateNonUniformBorderCappedRadii(bounds: CGRect, background: Backgr
function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void {
const layer: CALayer = nativeView.layer;
// 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);
const layerBounds = layer.bounds;
layer.borderColor = null;
layer.borderWidth = 0;
layer.cornerRadius = 0;
const cappedOuterRadii = calculateNonUniformBorderCappedRadii(drawingBounds, background);
const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background);
if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) {
layer.mask.path = generateNonUniformBorderOuterClipPath(drawingBounds, cappedOuterRadii);
layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii);
}
if (background.hasBorderWidth()) {
@ -750,8 +745,11 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
}
if (background.hasUniformBorderColor()) {
// Use anti-aliasing or borders will draw incorrectly at times
nativeView.borderLayer.shouldRasterize = true;
nativeView.borderLayer.rasterizationScale = Screen.mainScreen.scale;
nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
} else {
// Non-uniform borders need more layers in order to display multiple colors at the same time
let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
@ -759,6 +757,9 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
if (!nativeView.hasNonUniformBorderColor) {
const maskLayer = CAShapeLayer.new();
maskLayer.fillRule = kCAFillRuleEvenOdd;
// Use anti-aliasing or borders will draw incorrectly at times
maskLayer.shouldRasterize = true;
maskLayer.rasterizationScale = Screen.mainScreen.scale;
nativeView.borderLayer.mask = maskLayer;
borderTopLayer = CAShapeLayer.new();
@ -779,7 +780,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
borderLeftLayer = nativeView.borderLayer.sublayers[3];
}
const paths = generateNonUniformMultiColorBorderPaths(drawingBounds, background);
const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background);
borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
borderTopLayer.path = paths[0];
@ -792,7 +793,7 @@ function drawNonUniformBorders(nativeView: NativeScriptUIView, background: Backg
// Clip inner area to create borders
if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(drawingBounds, background, cappedOuterRadii);
nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
}
}
}