직사각형의 Corner Radius 샘플 코드를 UIBezierPath에 각각 지정합니다.

10024 단어 SwiftUIBezierPathiOS

Facebook Messenger의 그림처럼 각기 다른 각환을 가진 View를 만들고 싶습니다
UIBezierPath에는 그런 API가 없습니다.
각도를 선택한 API가 있지만...
이 일->init(roundedRect: CGRect, byRoundingCorners: UIRectCorner, cornerRadii: CGSize)그래서 고릴라 경로를 적어서 실현시켰다.
노트 수준이지만 모처럼 여기서 공유할 수 있는 기회가 생겼어요.🌳

샘플 코드

func roundedCorners(rect: CGRect, topLeft: CGFloat, topRight: CGFloat, bottomRight: CGFloat, bottomLeft: CGFloat) -> UIBezierPath {

  func radian(_ angle: CGFloat) -> CGFloat {
    return angle * CGFloat(M_PI) / 180
  }

  let path = UIBezierPath()
  path.move(to: CGPoint(x: topLeft, y: 0))

  path.addLine(to: CGPoint(x: rect.maxX - topRight, y: 0))
  path.addArc(withCenter: CGPoint(x: rect.maxX - topRight, y: topRight), radius: topRight, startAngle: radian(-90), endAngle: radian(0), clockwise: true)

  path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - bottomRight))
  path.addArc(withCenter: CGPoint(x: rect.maxX - bottomRight, y: rect.maxY - bottomRight), radius: bottomRight, startAngle: radian(0), endAngle: radian(90), clockwise: true)

  path.addLine(to: CGPoint(x: bottomLeft, y: rect.maxY))
  path.addArc(withCenter: CGPoint(x: bottomLeft, y: rect.maxY - bottomLeft), radius: bottomLeft, startAngle: radian(90), endAngle: radian(180), clockwise: true)

  path.addLine(to: CGPoint(x: 0, y: topLeft))
  path.addArc(withCenter: CGPoint(x: topLeft, y: topLeft), radius: topLeft, startAngle: radian(180), endAngle: radian(270), clockwise: true)

  return path
}

사용법

let path = roundedCorners(
  rect: CGRect(x: 0, y: 0, width: 100, height: 36), 
  topLeft: 8,
  topRight: 8,
  bottomRight: 8,
  bottomLeft: 4
)

좋은 웹페이지 즐겨찾기