HomeiOS DevelopmentRounded nook of a cut-out arc utilizing UIBezierPath with out off-setting the...

Rounded nook of a cut-out arc utilizing UIBezierPath with out off-setting the arc centre


(This query is a sequel to this one—I am making an attempt to determine learn how to adapt the code to new circumstances.)

I’ve a code that produces this form:

Rounded nook of a cut-out arc utilizing UIBezierPath with out off-setting the arc centre

The code is extracted right into a perform, producing CGPath:

personal func makePath(
  width: CGFloat,
  top: CGFloat,
  cornerRadius: CGFloat,
  cutOutRadius: CGFloat,
  cutOutCornerRadius: CGFloat,
  cutOutPosition: CGFloat
) -> CGPath {
  let path = CGMutablePath()

  // Begin at bottom-left earlier than left cut-out.
  path.transfer(to: CGPoint(x: .zero, y: top - cornerRadius))

  // Up left edge to left cut-out (rounded nook).
  path.addArc(
    tangent1End: CGPoint(x: .zero, y: cutOutPosition + cutOutRadius),
    tangent2End: CGPoint(x: cutOutRadius, y: cutOutPosition + cutOutRadius),
    radius: cutOutCornerRadius
  )

  // Left cut-out arc (high to backside, clockwise).
  path.addArc(
    heart: CGPoint(x: cutOutCornerRadius, y: cutOutPosition),
    radius: cutOutRadius,
    startAngle: .pi / 2.0,
    endAngle: 3.0 * .pi / 2.0,
    clockwise: true
  )

  // Down left edge after cut-out to bottom-left (rounded nook).
  path.addArc(
    tangent1End: CGPoint(x: .zero, y: cutOutPosition - cutOutRadius),
    tangent2End: .zero,
    radius: cutOutCornerRadius
  )

  // Backside-left nook to bottom-right nook.
  path.addArc(
    tangent1End: .zero,
    tangent2End: CGPoint(x: width, y: .zero),
    radius: cornerRadius
  )

  // Backside-right nook as much as proper cut-out begin (rounded nook).
  path.addArc(
    tangent1End: CGPoint(x: width, y: .zero),
    tangent2End: CGPoint(x: width, y: cutOutPosition - cutOutRadius),
    radius: cornerRadius
  )

  // Up proper edge to proper cutout (rounded nook).
  path.addArc(
    tangent1End: CGPoint(x: width, y: cutOutPosition - cutOutRadius),
    tangent2End: CGPoint(
      x: width - cutOutRadius, y: cutOutPosition - cutOutRadius
    ),
    radius: cutOutCornerRadius
  )

  // Proper cut-out arc (backside to high, counterclockwise).
  path.addArc(
    heart: CGPoint(x: width - cutOutCornerRadius, y: cutOutPosition),
    radius: cutOutRadius,
    startAngle: 3.0 * .pi / 2.0,
    endAngle: .pi / 2.0,
    clockwise: true
  )

  // Up proper edge after cut-out to top-right (rounded nook).
  path.addArc(
    tangent1End: CGPoint(x: width, y: cutOutPosition + cutOutRadius),
    tangent2End: CGPoint(x: width, y: top),
    radius: cutOutCornerRadius
  )

  // High-right nook to top-left.
  path.addArc(
    tangent1End: CGPoint(x: width, y: top),
    tangent2End: CGPoint(x: .zero, y: top),
    radius: cornerRadius
  )

  // High-left nook all the way down to place to begin.
  path.addArc(
    tangent1End: CGPoint(x: .zero, y: top),
    tangent2End: .zero,
    radius: cornerRadius
  )

  path.closeSubpath()

  return path
}

I have to tweak the code in order that the centre of the cut-out arc will not be moved horizontally in direction of the form centre by the dimensions of the radius, however stays on the form edge. In different phrases, as a substitute of this:

Path that adds rounded corners to a cut-out arc by shifting it

I want this:

Path that adds rounded corners to a cut-out arc without shifting it

I suppose it might contain much more difficult geometry, and I once more fail to determine the way it may very well be carried out.

Any steering is far appreciated!

P.S. Here is some code you could possibly paste into Playgrounds together with the perform above and have the entire working piece of software program:

import PlaygroundSupport
import UIKit

let width = 300.0
let top = 200.0

let view = UIView(
  body: CGRect(origin: .zero, dimension: CGSize(width: width, top: top))
)
view.backgroundColor = .clear

let shapeLayer = CAShapeLayer()
shapeLayer.body = view.bounds
shapeLayer.fillColor = UIColor.systemRed.cgColor

shapeLayer.fillRule = .evenOdd
shapeLayer.path = makePath(
  width: width,
  top: top,
  cornerRadius: 20.0,
  cutOutRadius: 30.0,
  cutOutCornerRadius: 10.0,
  cutOutPosition: top * 0.6
)

view.layer.insertSublayer(shapeLayer, at: 0)

PlaygroundPage.present.liveView = view

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments