UIBezierPath 둥근 모서리

Question

나는이 이미지는 다음과 같이이기 때문이다

내 코드를 아래 코드에서 지시 약간 둥근 모서리로 표시되도록 노력하고 있어요. 나는 경로 1, 경로 [4], 경로 [5]를 반올림하고 싶다. 나는 다른 접근 방식에 개방적이다. 제발 UIBezierPath (roundedRect : ..)를 추천하지 말아주세요. 이것은 까다 롭습니다! 당신이 둥근 모양을 확인하려면

 let width = self.view.frame.size.width 
     let trianglePath = UIBezierPath() 
     var pts = [CGPoint(x: 2 * width/16, y: width/16), 
       CGPoint(x: width/32, y: width/16 + width/16), 
       CGPoint(x: 2 * width/16 , y: width/16 + width/8), 
       CGPoint(x: width/5 + 2 * width/16, y: width/8 + width/16), 
       CGPoint(x: width/5 + 2 * width/16, y: width/16), 
       CGPoint(x: 2 * width/16, y: width/16) 
     ] 

     // this path replaces this, because i cannot easily add rectangle 
     //var path = UIBezierPath(roundedRect: rect, cornerRadius: width/37.5).cgPath 

     trianglePath.move(to: pts[0]) 
     trianglePath.addLine(to: pts[1]) // needs to be rounded 
     trianglePath.addLine(to: pts[2]) 
     trianglePath.addLine(to: pts[3]) 
     trianglePath.addLine(to: pts[4]) // needs to be rounded 
     trianglePath.addLine(to: pts[5]) // needs to be rounded 
     trianglePath.close() 

     let layer = CAShapeLayer() 

     layer.path = trianglePath.cgPath 
     layer.fillColor = UIColor.blue.cgColor 
     layer.lineCap = kCALineCapRound 
     layer.lineJoin = kCALineJoinRound 
     layer.zPosition = 4 
     layer.isHidden = false 
     view.layer.addSublayer(layer) 

Answer 1

을 사용해야합니다

trianglePath.AddArcToPoint(...); 

여기

참조 문서 : https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/BezierPaths/BezierPaths.html#//apple_ref/doc/uid/TP40010156-CH11-SW5

가 도움이 추가 될 수는, 여기 당신이 방법을 학습하는 데 사용할 수있는 전체 서브 클래스입니다 사용자 지정보기를 그립니다. 희망이 도움이됩니다. 여기에 설명 된대로

import Foundation 
import UIKit 

final class BorderedView:UIView 
{ 
    var drawTopBorder = false 
    var drawBottomBorder = false 
    var drawLeftBorder = false 
    var drawRightBorder = false 

    var topBorderColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.4) 
    var leftBorderColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.4) 
    var rightBorderColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6) 
    var bottomBorderColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6) 

    var upperLeftCornerRadius:CGFloat = 0 
    var upperRightCornerRadius:CGFloat = 0 
    var lowerLeftCornerRadius:CGFloat = 0 
    var lowerRightCornerRadius:CGFloat = 0 

    var subview:UIView? 
    fileprivate var visibleView:UIView! 
    fileprivate var _backgroundColor:UIColor! 

    override init(frame: CGRect) 
    { 
     super.init(frame: frame) 
     super.backgroundColor = UIColor.clear 
    } 

    required init?(coder aDecoder: NSCoder) 
    { 
     super.init(coder: aDecoder) 
     super.backgroundColor = UIColor.clear 
    } 

    func setVisibleBackgroundColor(_ color:UIColor) 
    { 
     _backgroundColor = color 
    } 

    func setBackgroundGradient(_ gradient:CAGradientLayer) 
    { 
     gradient.frame = visibleView.bounds 
     gradient.masksToBounds = true 
     visibleView.layer.insertSublayer(gradient, at: 0) 
    } 

    func drawView() 
    { 
     visibleView = UIView(frame: self.frame) 
     visibleView.backgroundColor = _backgroundColor 
     visibleView.clipsToBounds = true 
     if let v = subview 
     { 
      visibleView.addSubview(v) 
     } 
    } 

    override func draw(_ rect: CGRect) 
    { 
     // Drawing code 
     let width = rect.size.width - 0.5; 
     let height = rect.size.height - 0.5; 

     guard let context = UIGraphicsGetCurrentContext() else { return } 
     let w = self.frame.size.width; 
     let h = self.frame.size.height; 

     // Create clipping area as path. 
     let path = CGMutablePath(); 
     path.move(to: CGPoint(x: 0, y: upperLeftCornerRadius)) 
     path.addArc(tangent1End: CGPoint(x: 0, y: 0), tangent2End: CGPoint(x: upperLeftCornerRadius, y: 0), radius: upperLeftCornerRadius) 
     path.addLine(to: CGPoint(x: w - upperRightCornerRadius, y: 0)) 
     path.addArc(tangent1End: CGPoint(x: w, y: 0), tangent2End: CGPoint(x: w, y: upperRightCornerRadius), radius: upperRightCornerRadius) 
     path.addLine(to: CGPoint(x: w, y: h - lowerRightCornerRadius)) 
     path.addArc(tangent1End: CGPoint(x: w, y: h), tangent2End: CGPoint(x: w - lowerRightCornerRadius, y: h), radius: lowerRightCornerRadius) 
     path.addLine(to: CGPoint(x: lowerLeftCornerRadius, y: h)) 
     path.addArc(tangent1End: CGPoint(x: 0, y: h), tangent2End: CGPoint(x: 0, y: h - lowerLeftCornerRadius), radius: lowerLeftCornerRadius) 
     path.closeSubpath(); 
     // Add clipping area to path 
     context.addPath(path); 
     // Clip to the path and draw the image 
     context.clip(); 

     self.drawView() 
     visibleView.layer.render(in: context) 

     // ********** Your drawing code here ********** 
     context.setLineWidth(0.5); 
     var stroke = false 

     if (drawTopBorder) 
     { 
      context.setStrokeColor(topBorderColor.cgColor); 
      context.move(to: CGPoint(x: 0, y: 0.5)); //start at this point 
      context.addLine(to: CGPoint(x: width, y: 0.5)); //draw to this point 
      stroke = true 
     } 

     if (drawLeftBorder) 
     { 
      context.setStrokeColor(leftBorderColor.cgColor); 
      context.move(to: CGPoint(x: 0.5, y: 0.5)); //start at this point 
      context.addLine(to: CGPoint(x: 0.5, y: height)); //draw to this point 
      stroke = true 
     } 

     if (drawBottomBorder) 
     { 
      context.setStrokeColor(bottomBorderColor.cgColor); 
      context.move(to: CGPoint(x: 0.5, y: height)); //start at this point 
      context.addLine(to: CGPoint(x: width, y: height)); //draw to this point 
      stroke = true 
     } 

     if (drawRightBorder) 
     { 
      context.setStrokeColor(rightBorderColor.cgColor); 
      context.move(to: CGPoint(x: width, y: 0.5)); //start at this point 
      context.addLine(to: CGPoint(x: width, y: height)); //draw to this point 
      stroke = true 
     } 

     // and now draw the Path! 
     if stroke 
     { 
      context.strokePath(); 
     } 
    } 
} 

Answer 2

당신은 클리핑 패스를 만들 수 있습니다

https://www.raywenderlich.com/162313/core-graphics-tutorial-part-2-gradients-contexts 특히이 비트 :

let path = UIBezierPath(roundedRect: rect, 
       byRoundingCorners: .allCorners, 
        cornerRadii: CGSize(width: 8.0, height: 8.0)) 
path.addClip()