Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Sep 3, 2020
8 changes: 4 additions & 4 deletions iphone/TitaniumKit/TitaniumKit/Sources/API/TiUIView.m
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/Resources/ios/snapshots/borderRadius12px_12_12dp_12_3x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/Resources/ios/snapshots/borderRadius12px_12_2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified tests/Resources/ios/snapshots/borderRadius12px_12_3x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions tests/Resources/ti.ui.view.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down