Skip to content

Instantly share code, notes, and snippets.

@henrinormak
Last active September 18, 2021 14:59
Show Gist options
  • Save henrinormak/96c8918e7baa23d5b10a to your computer and use it in GitHub Desktop.
Save henrinormak/96c8918e7baa23d5b10a to your computer and use it in GitHub Desktop.
import UIKit
public func roundedPolygonPath(rect: CGRect, lineWidth: CGFloat, sides: NSInteger, cornerRadius: CGFloat, rotationOffset: CGFloat = 0) -> UIBezierPath {
let path = UIBezierPath()
let theta: CGFloat = CGFloat(2.0 * Double.pi) / CGFloat(sides) // How much to turn at every corner
let width = min(rect.size.width, rect.size.height) // Width of the square
let center = CGPoint(x: rect.origin.x + width / 2.0, y: rect.origin.y + width / 2.0)
// Radius of the circle that encircles the polygon
// Notice that the radius is adjusted for the corners, that way the largest outer
// dimension of the resulting shape is always exactly the width - linewidth
let radius = (width - lineWidth + cornerRadius - (cos(theta) * cornerRadius)) / 2.0
// Start drawing at a point, which by default is at the right hand edge
// but can be offset
var angle = CGFloat(rotationOffset)
let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
path.move(to: CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta)))
for _ in 0..<sides {
angle += theta
let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
let tip = CGPoint(x: center.x + radius * cos(angle), y: center.y + radius * sin(angle))
let start = CGPoint(x: corner.x + cornerRadius * cos(angle - theta), y: corner.y + cornerRadius * sin(angle - theta))
let end = CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta))
path.addLine(to: start)
path.addQuadCurve(to: end, controlPoint: tip)
}
path.close()
// Move the path to the correct origins
let bounds = path.bounds
let transform = CGAffineTransform(translationX: -bounds.origin.x + rect.origin.x + lineWidth / 2.0, y: -bounds.origin.y + rect.origin.y + lineWidth / 2.0)
path.apply(transform)
return path
}
public func createImage(layer: CALayer) -> UIImage! {
let size = CGSize(width: layer.frame.maxX, height: layer.frame.maxY)
UIGraphicsBeginImageContextWithOptions(size, layer.isOpaque, 0.0)
let ctx = UIGraphicsGetCurrentContext()!
layer.render(in: ctx)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
let lineWidth = CGFloat(2.0)
let rect = CGRect(x: 0.0, y: 0.0, width: 150.0, height: 150.0)
let sides = 5
let rotationOffset = CGFloat(Double.pi / 2.0)
var path = roundedPolygonPath(rect: rect, lineWidth: lineWidth, sides: sides, cornerRadius: 15.0, rotationOffset: rotationOffset)
let borderLayer = CAShapeLayer()
borderLayer.frame = CGRect(x: 0.0, y: 0.0, width: path.bounds.width + lineWidth, height: path.bounds.height + lineWidth)
borderLayer.path = path.cgPath
borderLayer.lineWidth = lineWidth
borderLayer.lineJoin = kCALineJoinRound
borderLayer.lineCap = kCALineCapRound
borderLayer.strokeColor = UIColor.black.cgColor
borderLayer.fillColor = UIColor.white.cgColor
var image = createImage(layer: borderLayer)
@emrcftci
Copy link

Swift 5

private func roundedPolygonPath(
    rect: CGRect,
    lineWidth: CGFloat,
    sides: NSInteger,
    cornerRadius: CGFloat,
    rotationOffset: CGFloat = 0
) -> UIBezierPath {

    let path = UIBezierPath()
    let theta: CGFloat = CGFloat(2.0 * Double.pi) / CGFloat(sides) // How much to turn at every corner
    let width = min(rect.size.width, rect.size.height)             // Width of the square

    let center = CGPoint(x: rect.origin.x + width / 2.0, y: rect.origin.y + width / 2.0)

    // Radius of the circle that encircles the polygon
    // Notice that the radius is adjusted for the corners, that way the largest outer
    // dimension of the resulting shape is always exactly the width - linewidth
    let radius = (width - lineWidth + cornerRadius - (cos(theta) * cornerRadius)) / 2.0

    // Start drawing at a point, which by default is at the right hand edge
    // but can be offset
    var angle = CGFloat(rotationOffset)

    let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
    path.move(to: CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta)))

    (0..<sides).forEach { _ in
      angle += theta

      let corner = CGPoint(x: center.x + (radius - cornerRadius) * cos(angle), y: center.y + (radius - cornerRadius) * sin(angle))
      let tip = CGPoint(x: center.x + radius * cos(angle), y: center.y + radius * sin(angle))
      let start = CGPoint(x: corner.x + cornerRadius * cos(angle - theta), y: corner.y + cornerRadius * sin(angle - theta))
      let end = CGPoint(x: corner.x + cornerRadius * cos(angle + theta), y: corner.y + cornerRadius * sin(angle + theta))

      path.addLine(to: start)
      path.addQuadCurve(to: end, controlPoint: tip)
    }

    path.close()

    // Move the path to the correct origins
    let bounds = path.bounds
    let transform = CGAffineTransform(translationX: -bounds.origin.x + rect.origin.x + lineWidth / 2.0,
                                      y: -bounds.origin.y + rect.origin.y + lineWidth / 2.0)
    path.apply(transform)

    return path
}

public func image(from layer: CALayer) -> UIImage {
    let size = CGSize(width: layer.frame.maxX, height: layer.frame.maxY)
    UIGraphicsBeginImageContextWithOptions(size, layer.isOpaque, 0.0)
    let context = UIGraphicsGetCurrentContext()!

    layer.render(in: context)
    let image = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return image ?? UIImage()
}

Usage

let lineWidth = CGFloat(2.0)
let rect = CGRect(x: 0.0, y: 0.0, width: 150.0, height: 150.0)
let sides = 5
let rotationOffset = CGFloat(Double.pi / 2.0)

let path = roundedPolygonPath(rect: rect,
                              lineWidth: lineWidth,
                              sides: sides,
                              cornerRadius: 15.0,
                              rotationOffset: rotationOffset)

let borderLayer = CAShapeLayer()
borderLayer.frame = CGRect(x: 0.0, y: 0.0, width: path.bounds.width + lineWidth, height: path.bounds.height + lineWidth)
borderLayer.path = path.cgPath
borderLayer.lineWidth = lineWidth
borderLayer.lineJoin = .round
borderLayer.lineCap = .round
borderLayer.strokeColor = UIColor.black.cgColor
borderLayer.fillColor = UIColor.white.cgColor

var image = image(from: borderLayer)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment