fix(ios): use arc to create corner radius instead of qudratic curve (#…

…11969) Fixes TIMOB-28101
tidev · Sep 3, 2020 · b5ed723 · b5ed723
1 parent 815a0fc
commit b5ed723
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 4 deletions.
diff --git a/iphone/TitaniumKit/TitaniumKit/Sources/API/TiUIView.m b/iphone/TitaniumKit/TitaniumKit/Sources/API/TiUIView.m
@@ -686,13 +686,13 @@ - (void)addCornerRadius:(NSArray *)radiusArray toLayer:(CALayer *)viewLayer
   UIBezierPath *bezierPath = [UIBezierPath bezierPath];
   [bezierPath moveToPoint:CGPointMake(0 + topLeftRadius, 0)];
   [bezierPath addLineToPoint:CGPointMake(size.width - topRightRadius, 0)];
-  [bezierPath addQuadCurveToPoint:CGPointMake(size.width, topRightRadius) controlPoint:CGPointMake(size.width, 0)];
+  [bezierPath addArcWithCenter:CGPointMake(size.width - topRightRadius, topRightRadius) radius:topRightRadius startAngle:3 * M_PI_2 endAngle:0 clockwise:YES];
   [bezierPath addLineToPoint:CGPointMake(size.width, size.height - bottomRightRadius)];
-  [bezierPath addQuadCurveToPoint:CGPointMake(size.width - bottomRightRadius, size.height) controlPoint:CGPointMake(size.width, size.height)];
+  [bezierPath addArcWithCenter:CGPointMake(size.width - bottomRightRadius, size.height - bottomRightRadius) radius:bottomRightRadius startAngle:0 endAngle:M_PI_2 clockwise:YES];
   [bezierPath addLineToPoint:CGPointMake(bottomLeftRadius, size.height)];
-  [bezierPath addQuadCurveToPoint:CGPointMake(0, size.height - bottomLeftRadius) controlPoint:CGPointMake(0, size.height)];
+  [bezierPath addArcWithCenter:CGPointMake(bottomLeftRadius, size.height - bottomLeftRadius) radius:bottomLeftRadius startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
   [bezierPath addLineToPoint:CGPointMake(0, topLeftRadius)];
-  [bezierPath addQuadCurveToPoint:CGPointMake(0 + topLeftRadius, 0) controlPoint:CGPointMake(0, 0)];
+  [bezierPath addArcWithCenter:CGPointMake(topLeftRadius, topLeftRadius) radius:topLeftRadius startAngle:M_PI endAngle:3 * M_PI_2 clockwise:YES];
   [bezierPath closePath];
 
   shapeLayer.path = bezierPath.CGPath;

diff --git a/tests/Resources/android/snapshots/borderRadius30px.png b/tests/Resources/android/snapshots/borderRadius30px.png
diff --git a/tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_2x.png b/tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_2x.png
diff --git a/tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_3x.png b/tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_3x.png
diff --git a/tests/Resources/ios/snapshots/borderRadius12px_12_2x.png b/tests/Resources/ios/snapshots/borderRadius12px_12_2x.png
diff --git a/tests/Resources/ios/snapshots/borderRadius12px_12_3x.png b/tests/Resources/ios/snapshots/borderRadius12px_12_3x.png
diff --git a/tests/Resources/ios/snapshots/borderRadius30px.png b/tests/Resources/ios/snapshots/borderRadius30px.png
diff --git a/tests/Resources/ti.ui.view.test.js b/tests/Resources/ti.ui.view.test.js
@@ -1125,6 +1125,37 @@ describe('Titanium.UI.View', function () {
 			win.add(outerView);
 			win.open();
 		});
+
+		it('1 value to create circle', finish => {
+			win = Ti.UI.createWindow({ backgroundColor: 'blue' });
+			const outerView = Ti.UI.createView({
+				width: '90px',
+				height: '90px',
+				backgroundColor: 'green'
+			});
+			const view = Ti.UI.createView({
+				width: '60px',
+				height: '60px',
+				borderRadius: '30px',
+				backgroundColor: 'yellow'
+			});
+
+			win.addEventListener('postlayout', function postlayout() {
+				win.removeEventListener('postlayout', postlayout); // only run once
+				try {
+					should(view.borderRadius).be.a.String();
+					should(view.borderRadius).eql('30px');
+					should(outerView).matchImage('snapshots/borderRadius30px.png');
+				} catch (err) {
+					return finish(err);
+				}
+				finish();
+			});
+
+			outerView.add(view);
+			win.add(outerView);
+			win.open();
+		});
 	});
 
 	it.android('touchFeedback', finish => {