UIBezierPath Закругленных углов

Question

Я пытаюсь сделать это изображение появляется с некоторыми закругленными углами, продиктованных в коде ниже

Моего кода для этого заключается в следующем. Мне нужен путь 1, путь [4], путь [5] округленный. Я открыт для другого подхода. Пожалуйста, не рекомендуем UIBezierPath (roundedRect: ..), так как мне не нужны corenrs 0,2 округлые. Это сложно!

 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()