From 740848e6046266aca9dff4deda44d491c98981ff Mon Sep 17 00:00:00 2001 From: "pengfei.zhou" Date: Fri, 2 Aug 2019 20:24:05 +0800 Subject: [PATCH] iOS corner path --- iOS/Pod/Classes/Shader/DoricViewNode.m | 59 +++++++++++++++++++++++++- js-framework/demo.ts | 5 +-- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/iOS/Pod/Classes/Shader/DoricViewNode.m b/iOS/Pod/Classes/Shader/DoricViewNode.m index 3132c179..5457aabe 100644 --- a/iOS/Pod/Classes/Shader/DoricViewNode.m +++ b/iOS/Pod/Classes/Shader/DoricViewNode.m @@ -11,6 +11,45 @@ #import "DoricRootNode.h" #import "DoricConstant.h" +void DoricAddEllipticArcPath(CGMutablePathRef path, + CGPoint origin, + CGFloat radius, + CGFloat startAngle, + CGFloat endAngle) { + CGAffineTransform t = CGAffineTransformMakeTranslation(origin.x, origin.y); + CGPathAddArc(path, &t, 0, 0, radius, startAngle, endAngle, NO); +} + + +CGPathRef DoricCreateRoundedRectPath(CGRect bounds, + CGFloat leftTop, + CGFloat rightTop, + CGFloat rightBottom, + CGFloat leftBottom) { + const CGFloat minX = CGRectGetMinX(bounds); + const CGFloat minY = CGRectGetMinY(bounds); + const CGFloat maxX = CGRectGetMaxX(bounds); + const CGFloat maxY = CGRectGetMaxY(bounds); + + CGMutablePathRef path = CGPathCreateMutable(); + DoricAddEllipticArcPath(path, (CGPoint){ + minX + leftTop, minY + leftTop + }, leftTop, M_PI, 3 * M_PI_2); + DoricAddEllipticArcPath(path, (CGPoint){ + maxX - rightTop, minY + rightTop + }, rightTop, 3 * M_PI_2, 0); + DoricAddEllipticArcPath(path, (CGPoint){ + maxX - rightBottom, maxY -rightBottom + }, rightBottom, 0, M_PI_2); + DoricAddEllipticArcPath(path, (CGPoint){ + minX + leftBottom, maxY - leftBottom + }, leftBottom, M_PI_2, M_PI); + CGPathCloseSubpath(path); + return path; +} + + + @interface DoricViewNode() @property (nonatomic,strong) NSMutableDictionary *callbackIds; @end @@ -79,7 +118,25 @@ - (void)blendView:(UIView *)view forPropName:(NSString *)name propValue:(id)prop if([prop isKindOfClass:NSNumber.class]) { view.layer.cornerRadius = [(NSNumber *)prop floatValue]; } else if([prop isKindOfClass:NSDictionary.class]) { - + NSDictionary *dic = prop; + CGFloat leftTop = [(NSNumber *)[dic objectForKey:@"leftTop"] floatValue]; + CGFloat rightTop = [(NSNumber *)[dic objectForKey:@"rightTop"] floatValue]; + CGFloat rightBottom = [(NSNumber *)[dic objectForKey:@"rightBottom"] floatValue]; + CGFloat leftBottom = [(NSNumber *)[dic objectForKey:@"leftBottom"] floatValue]; + CALayer *mask = nil; + if(ABS(leftTop - rightTop) > CGFLOAT_MIN + ||ABS(leftTop - rightBottom) > CGFLOAT_MIN + ||ABS(leftTop - leftBottom) > CGFLOAT_MIN) { + view.layer.cornerRadius = 0; + CAShapeLayer *shapeLayer = [CAShapeLayer layer]; + CGPathRef path = DoricCreateRoundedRectPath(self.view.bounds, leftTop, rightTop, rightBottom, leftBottom); + shapeLayer.path = path; + CGPathRelease(path); + mask = shapeLayer; + } else { + view.layer.cornerRadius = leftTop; + } + view.layer.mask = mask; } } else if([name isEqualToString:@"shadow"]) { NSDictionary *dic = prop; diff --git a/js-framework/demo.ts b/js-framework/demo.ts index 59817354..78cf177b 100644 --- a/js-framework/demo.ts +++ b/js-framework/demo.ts @@ -48,10 +48,7 @@ class CounterView extends ViewHolder { offsetX: -10, offsetY: 10, } - vlayout.corners = { - leftBottom: 10, - rightBottom: 20, - } + vlayout.corners = 20 vlayout.addChild(this.number) vlayout.addChild(this.counter) // root.bgColor = Color.parse('#00ff00')