創建具有直邊的橢圓形ImageView

我試圖創建一個看起來像這樣的自定義形狀的 ImageView。

我最初的想法是使用以下擴展來圓角，如下所示：

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

extension UIBezierPath {
  static func rectWithRoundCorners(
    size: CGSize,
    topLeft: CGFloat = 0,
    bottomLeft: CGFloat = 0,
    bottomRight: CGFloat = 0,
    topRight: CGFloat = 0)
    -> UIBezierPath
  {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: size.width - topRight, y: 0))
    path.addLine(to: CGPoint(x: topLeft, y: 0))
    path.addQuadCurve(to: CGPoint(x: 0, y: topLeft), controlPoint: .zero)
    path.addLine(to: CGPoint(x: 0, y: size.height - bottomLeft))
    path.addQuadCurve(to: CGPoint(x: bottomLeft, y: size.height), controlPoint: CGPoint(x: 0, y: size.height))
    path.addLine(to: CGPoint(x: size.width - bottomRight, y: size.height))
    path.addQuadCurve(
      to: CGPoint(x: size.width, y: size.height - bottomRight),
      controlPoint: CGPoint(x: size.width, y: size.height))
    path.addLine(to: CGPoint(x: size.width, y: topRight))
    path.addQuadCurve(to: CGPoint(x: size.width - topRight, y: 0), controlPoint: CGPoint(x: size.width, y: 0))
    return path
  }
}

extension UIView {
  func roundCorners(topLeft: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0, topRight: CGFloat = 0) {
    let path = UIBezierPath.rectWithRoundCorners(
    size: bounds.size,
    topLeft: topLeft,
    bottomLeft: bottomLeft,
    bottomRight: bottomRight,
    topRight: topRight)

    let shape = CAShapeLayer()
    shape.path = path.cgPath
    layer.mask = shape
  }
}

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let label = UILabel()
        label.frame = CGRect(x: 150, y: 200, width: 114, height: 114)
        label.backgroundColor = .red
        label.text = "Hello World!"
        label.textColor = .black
        label.roundCorners(topLeft: 100, bottomLeft: 50, bottomRight: 0, topRight: 50)

        
        view.addSubview(label)
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

但我得到以下結果：

使用圓角矩形和 UIBezierPath 有更好的方法嗎？我沒有使用 UIBezierPath 的經驗，所以不確定它會如何做圓角和直邊......

uj5u.com熱心網友回復：

好吧，你的形狀只有兩個直邊，所以最多應該有兩個addLine呼叫。

可能有更嚴格的數學解決方案，但我使用 Adob??e Photoshop 或 Illustrator 等工具來近似我需要的貝塞爾曲線。

整體形狀（以 117×103 矩形為界）可以用一個大的三次貝塞爾曲線（如下所示），一個addLine用于底邊，一個四邊形貝塞爾曲線（或弧）用于圓角右下角，然后只是close路徑。

為了獲得這些控制點，我使用 Adob??e Illustrator 中的鋼筆工具創建了一個適當形狀的立方貝塞爾曲線，然后我將路徑匯出為 SVG，并破譯檔案以得出各種控制點的適當坐標：

let rect = CGRect(origin: .zero, size: CGSize(width: 117, height: 103))
let radius: CGFloat = 10

let path = UIBezierPath()

path.move(to: CGPoint(x: rect.maxX, y: 27.62))

path.addCurve(to: CGPoint(x: 11.77, y: rect.maxY),
              controlPoint1: CGPoint(x: 77, y: -46.21),
              controlPoint2: CGPoint(x: -36.11, y: 44.91))

path.addLine(to: CGPoint(x: rect.maxX - radius, y: rect.maxY))

path.addQuadCurve(to: CGPoint(x: rect.maxX, y: rect.maxY - radius),
                  controlPoint: CGPoint(x: rect.maxX, y: rect.maxY))

path.close()

let shapeLayer = CAShapeLayer()
shapeLayer.fillColor = UIColor.blue.cgColor
shapeLayer.path = path.cgPath

someView.layer.addSublayer(shapeLayer)

調整您認為合適的坐標，但希望這說明（不是雙關語）如何在繪圖中逼近貝塞爾曲線并將其轉換為 Swift 代碼。

This is the resulting image:

標籤：迅速

上一篇：SwiftUI中的回圈問題

下一篇：從'String'到'String'的條件轉換總是成功-Swift