Merge pull request unoplatform#5401 from unoplatform/dev/sb/border-la…

…yer-corner-radius fix(BorderLayerRenderer): [iOS/Skia] Adjust corner radius when drawing inner path of border to account of stroke thickness offset
jeromelaban · Mar 7, 2021 · 5089e05 · 5089e05
2 parents 2658a01 + cd12462
commit 5089e05
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 20 deletions.
diff --git a/src/SamplesApp/SamplesApp.UITests/RuntimeTests.cs b/src/SamplesApp/SamplesApp.UITests/RuntimeTests.cs
@@ -20,7 +20,7 @@ public partial class RuntimeTests : SampleControlUITestBase
 
 		[Test]
 		[AutoRetry(tryCount: 1)]
-		[Timeout(800000)] // Adjust this timeout based on average test run duration
+		[Timeout(900000)] // Adjust this timeout based on average test run duration
 		public async Task RunRuntimeTests()
 		{
 			Run("SamplesApp.Samples.UnitTests.UnitTestsPage");

diff --git a/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.iOSmacOS.cs b/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.iOSmacOS.cs
@@ -103,12 +103,12 @@ private static IDisposable InnerCreateLayer(UIElement owner, CALayer parent, Lay
 
 			if (cornerRadius != CornerRadius.None)
 			{
-				var maxRadius = Math.Max(0, Math.Min((float)area.Width / 2 - widthOffset, (float)area.Height / 2 - heightOffset));
-				cornerRadius = new CornerRadius(
-					Math.Min(cornerRadius.TopLeft, maxRadius),
-					Math.Min(cornerRadius.TopRight, maxRadius),
-					Math.Min(cornerRadius.BottomRight, maxRadius),
-					Math.Min(cornerRadius.BottomLeft, maxRadius));
+				var maxInnerRadius = Math.Max(0, Math.Min((float)area.Width / 2 - widthOffset, (float)area.Height / 2 - heightOffset));
+				var innerCornerRadius = new CornerRadius(
+					Math.Min(cornerRadius.TopLeft, maxInnerRadius),
+					Math.Min(cornerRadius.TopRight, maxInnerRadius),
+					Math.Min(cornerRadius.BottomRight, maxInnerRadius),
+					Math.Min(cornerRadius.BottomLeft, maxInnerRadius));
 
 				var outerLayer = new CAShapeLayer();
 				var innerLayer = new CAShapeLayer();
@@ -123,7 +123,7 @@ private static IDisposable InnerCreateLayer(UIElement owner, CALayer parent, Lay
 					})
 					.DisposeWith(disposables);
 
-				var path = GetRoundedRect(cornerRadius, area, adjustedArea);
+				var path = GetRoundedRect(cornerRadius, innerCornerRadius, area, adjustedArea);
 				var innerPath = GetRoundedPath(cornerRadius, adjustedArea);
 
 				var insertionIndex = 0;
@@ -353,12 +353,12 @@ private static IDisposable InnerCreateLayer(UIElement owner, CALayer parent, Lay
 		/// <summary>
 		/// Creates a rounded-rectangle path from the nominated bounds and corner radius.
 		/// </summary>
-		private static CGPath GetRoundedRect(CornerRadius cornerRadius, CGRect area, CGRect insetArea)
+		private static CGPath GetRoundedRect(CornerRadius cornerRadius, CornerRadius innerCornerRadius, CGRect area, CGRect insetArea)
 		{
 			var path = new CGPath();
 
 			GetRoundedPath(cornerRadius, area, path);
-			GetRoundedPath(cornerRadius, insetArea, path);
+			GetRoundedPath(innerCornerRadius, insetArea, path);
 
 			return path;
 		}
@@ -368,7 +368,6 @@ private static CGPath GetRoundedPath(CornerRadius cornerRadius, CGRect area, CGP
 			path ??= new CGPath();
 			// How AddArcToPoint works:
 			// http://www.twistedape.me.uk/blog/2013/09/23/what-arctopointdoes/
-
 			path.MoveToPoint(area.GetMidX(), area.Y);
 			path.AddArcToPoint(area.Right, area.Top, area.Right, area.GetMidY(), (float)cornerRadius.TopRight);
 			path.AddArcToPoint(area.Right, area.Bottom, area.GetMidX(), area.Bottom, (float)cornerRadius.BottomRight);

diff --git a/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.skia.cs b/src/Uno.UI/UI/Xaml/Controls/Border/BorderLayerRenderer.skia.cs
@@ -96,12 +96,12 @@ private static IDisposable InnerCreateLayer(UIElement owner, LayoutState state)
 
 			if (cornerRadius != CornerRadius.None)
 			{
-				var maxRadius = Math.Max(0, Math.Min((float)area.Width / 2 - heightOffset, (float)area.Height / 2 - widthOffset));
-				cornerRadius = new CornerRadius(
-					Math.Min(cornerRadius.TopLeft, maxRadius),
-					Math.Min(cornerRadius.TopRight, maxRadius),
-					Math.Min(cornerRadius.BottomRight, maxRadius),
-					Math.Min(cornerRadius.BottomLeft, maxRadius));
+				var maxInnerRadius = Math.Max(0, Math.Min((float)area.Width / 2 - widthOffset, (float)area.Height / 2 - heightOffset));
+				var innerCornerRadius = new CornerRadius(
+					Math.Min(cornerRadius.TopLeft, maxInnerRadius),
+					Math.Min(cornerRadius.TopRight, maxInnerRadius),
+					Math.Min(cornerRadius.BottomRight, maxInnerRadius),
+					Math.Min(cornerRadius.BottomLeft, maxInnerRadius));
 
 				var borderShape = compositor.CreateSpriteShape();
 				var backgroundShape = compositor.CreateSpriteShape();
@@ -143,7 +143,7 @@ private static IDisposable InnerCreateLayer(UIElement owner, LayoutState state)
 					backgroundShape.FillBrush = null;
 				}
 
-				var borderPath = GetRoundedRect(cornerRadius, area, adjustedArea);
+				var borderPath = GetRoundedRect(cornerRadius, innerCornerRadius, area, adjustedArea);
 				var backgroundPath = GetRoundedPath(cornerRadius, adjustedArea);
 				var outerPath = GetRoundedPath(cornerRadius, area);
 
@@ -372,12 +372,12 @@ private static CompositionPath GetRoundedPath(CornerRadius cornerRadius, Rect ar
 			return new CompositionPath(geometrySource);
 		}
 
-		private static CompositionPath GetRoundedRect(CornerRadius cornerRadius, Rect area, Rect insetArea)
+		private static CompositionPath GetRoundedRect(CornerRadius cornerRadius, CornerRadius innerCornerRadius, Rect area, Rect insetArea)
 		{
 			var geometrySource = new SkiaGeometrySource2D();
 
 			GetRoundedPath(cornerRadius, area, geometrySource);
-			GetRoundedPath(cornerRadius, insetArea, geometrySource);
+			GetRoundedPath(innerCornerRadius, insetArea, geometrySource);
 			geometrySource.Geometry.FillType = SKPathFillType.EvenOdd;
 			return new CompositionPath(geometrySource);
 		}