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

fix(ios): proper drawing bounds for colored borders (#10600)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-08-06 01:42:13 +03:00
committed by GitHub
parent f7b9d06e91
commit 75c8e941a0
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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);
}
}
}