2017-11-26 15 views
1

내가 UIView 내 코너 라운딩이 코드를 사용하여 오목 모서리를 달성하기 설정 코너 반경

extension UIView { 

    func roundCorners(_ corners: UIRectCorner, radius: CGFloat) { 
     let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) 
     let mask = CAShapeLayer() 
     mask.path = path.cgPath 
     self.layer.mask = mask 
     self.layer.masksToBounds = false 
    } 
} 

는 그때 view.roundCorners([.topLeft, .topRight], radius: view.frame.width/3)

지금이 볼록으로 모서리를 라운드 사용되고, 나는 반대를 원한다. 상단 모서리가 동일한 점에 머물 것이라는 것을 의미하지만 그 사이의 선은보기 안쪽을 향해 둥글게됩니다. 위의 함수를 음수 값으로 호출하여이 작업을 시도했지만 아무 일도 일어나지 않았습니다.

나는 내 목표를 화나게하는 그림을 추가했습니다. 어떻게이 작업을 수행 할 수 있습니까? enter image description here

답변

1

UIBezierPath을 직접 만들어야합니다. 오목한 끝 부분에 대해서는 addQuadCurve(to:controlPoint:)이 유용합니다. 여기

나는 곡선의 양을 제어하는 ​​매개 변수 depth을 사용하고 있습니다 :

extension UIView { 

    func concaveEnds(depth: CGFloat) { 
     let width = self.bounds.width 
     let height = self.bounds.height 

     let path = UIBezierPath() 
     path.move(to: CGPoint.zero) 
     path.addLine(to: CGPoint(x: width, y: 0)) 
     path.addQuadCurve(to: CGPoint(x: width, y: height), controlPoint: CGPoint(x: width - height * depth, y: height/2)) 
     path.addLine(to: CGPoint(x: 0, y: height)) 
     path.addQuadCurve(to: CGPoint.zero, controlPoint: CGPoint(x: height * depth, y: height/2)) 
     let mask = CAShapeLayer() 
     mask.path = path.cgPath 
     self.layer.mask = mask 
     self.layer.masksToBounds = false 
    } 
} 

데모 놀이터에서 :

let view = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 100)) 
view.backgroundColor = .red 

view.concaveEnds(depth: 0.4) 

Demo in Playground Demo with less curve

+0

놀라운 완벽한 해답을. 노력에 감사드립니다! – Eyzuky

+0

여러분을 환영합니다! – vacawama