Swift, polar coordinates - swift

I have to draw 12 points in a circle with different radiant. From point 1, draw a line to point 2, from point 2 to 3, etc. The lines will not be a problem.
I can not find a formula to find the 12 * (x,y), but I think it's something with polar coordinates / circle?
Is anyone working with it and maybe want to share with me?
See the picture which might explain better than I can:

This is the result I got:
And This is my Playground:
//: Playground - noun: a place where people can play
import Foundation
import UIKit
class DemoView: UIView {
override func draw(_ rect: CGRect) {
let origin = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
let radius = frame.size.width / 2
self.createCircle(origin: origin, radius: radius)
self.addLinesInCircle(origin: origin, radius: radius)
}
func createCircle(origin: CGPoint, radius: CGFloat) {
let path = UIBezierPath()
path.addArc(withCenter: origin, radius: radius, startAngle: 0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
path.close()
UIColor.orange.setFill()
path.fill()
}
func addLinesInCircle(origin: CGPoint, radius: CGFloat) {
let path = UIBezierPath()
let incrementAngle: CGFloat = CGFloat.pi / 6
let ratios: [CGFloat] = [3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6, 3/6]
for (index, ratio) in ratios.enumerated() {
let point = CGPoint(x: origin.x + cos(CGFloat(index) * incrementAngle) * radius * ratio,
y: origin.y + sin(CGFloat(index) * incrementAngle) * radius * ratio)
if index == 0 {
path.move(to: point)
} else {
path.addLine(to: point)
}
}
path.close()
UIColor.black.set()
path.stroke()
}
}
let demoView = DemoView(frame: CGRect(x: 0, y: 0, width: 320, height: 320))

Related

How to round corners of this custom shape SwiftUI?

I used this tutorial to create a hexagon shape:
https://www.hackingwithswift.com/quick-start/swiftui/how-to-draw-polygons-and-stars
My goal is to try to round the corners of my hexagon shape. I know I have to use the path.addCurve somehow, but I cannot figure out where I need to do that. I am only getting weird results. Has anyone got an idea?
struct Polygon: Shape {
let corners: Int
let smoothness: CGFloat
func path(in rect: CGRect) -> Path {
guard corners >= 2 else { return Path() }
let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
var currentAngle = -CGFloat.pi / 2
let angleAdjustment = .pi * 2 / CGFloat(corners * 2)
let innerX = center.x * smoothness
let innerY = center.y * smoothness
var path = Path()
path.move(to: CGPoint(x: center.x * cos(currentAngle), y: center.y * sin(currentAngle)))
var bottomEdge: CGFloat = 0
for corner in 0 ..< corners * 2 {
let sinAngle = sin(currentAngle)
let cosAngle = cos(currentAngle)
let bottom: CGFloat
if corner.isMultiple(of: 2) {
bottom = center.y * sinAngle
path.addLine(to: CGPoint(x: center.x * cosAngle, y: bottom))
} else {
bottom = innerY * sinAngle
path.addLine(to: CGPoint(x: innerX * cosAngle, y: bottom))
}
if bottom > bottomEdge {
bottomEdge = bottom
}
currentAngle += angleAdjustment
}
let unusedSpace = (rect.height / 2 - bottomEdge) / 2
let transform = CGAffineTransform(translationX: center.x, y: center.y + unusedSpace)
return path.applying(transform)
}
}
struct Hexagon: View {
#Environment(\.colorScheme) var colorScheme
var body: some View {
Polygon(corners: 3, smoothness: 1)
.fill(.clear)
.frame(width: 76, height: 76)
}
}
Haven't found a fix but this library does what I want:
https://github.com/heestand-xyz/PolyKit

Add lines to the circle at a given angle in Core Graphics Swift

I create this circle view like this:
override func draw(_ rect: CGRect) {
super.draw(rect)
if let context = UIGraphicsGetCurrentContext()
{
let width = fmin(self.frame.size.width, self.frame.size.height)
let offset_x = abs(width - self.frame.size.width)/2
let offset_y = abs(width - self.frame.size.height)/2
let padding = CGFloat(0.5)
let radius_size = (width/2) - (padding*2)
let circle_width = radius_size/4
context.setStrokeColor(UIColor.black.cgColor)
// Draw a circle
for i in 0 ..< 4
{
let offset = CGFloat(i) * circle_width
context.strokeEllipse(in:
CGRect(
x: padding + offset + offset_x,
y: padding + offset + offset_y,
width: (radius_size - offset)*2,
height: (radius_size - offset)*2))
}
context.strokePath()
}
}
How can I create a line to the circle center, if I have an array, of angles for the most top circle? And how can I do the same, for the middle circle?
For example, I have an array, with the given angles in degrees: [87.0, 112.0, 150.0]
Here's a function drawLine that draws a line from a center point at an angle with a specific radius. To change which circle the line reaches, just change the radius:
override func draw(_ rect: CGRect) {
super.draw(rect)
if let context = UIGraphicsGetCurrentContext()
{
let width = fmin(self.frame.size.width, self.frame.size.height)
let offset_x = abs(width - self.frame.size.width)/2
let offset_y = abs(width - self.frame.size.height)/2
let padding = CGFloat(0.5)
let radius_size = (width/2) - (padding*2)
let circle_width = radius_size/4
context.setStrokeColor(UIColor.black.cgColor)
// Draw a circle
for i in 0 ..< 4
{
let offset = CGFloat(i) * circle_width
context.strokeEllipse(in:
CGRect(
x: padding + offset + offset_x,
y: padding + offset + offset_y,
width: (radius_size - offset)*2,
height: (radius_size - offset)*2))
}
let angles: [CGFloat] = [87.0, 112.0, 150]
let angles2: [CGFloat] = [210.0, 250.0, 330.0]
let center = CGPoint(x: width/2 + offset_x, y: width/2 + offset_y)
for angle in angles {
drawLine(context: context, center: center, radius: radius_size, angle: angle)
}
for angle in angles2 {
drawLine(context: context, center: center, radius: radius_size * 3 / 4, angle: angle)
}
context.strokePath()
}
}
func drawLine(context: CGContext, center: CGPoint, radius: CGFloat, angle: CGFloat) {
context.move(to: center)
context.addLine(to: CGPoint(x: center.x + radius * cos(angle * .pi / 180), y: center.y - radius * sin(angle * .pi / 180)))
}

Swift Draw Custom Circle [duplicate]

This question already has answers here:
Animate CAShapeLayer path change
(1 answer)
Circular Progress Bars in IOS
(7 answers)
Closed 4 years ago.
I am trying to implement a custom circular analysis view.
The view should be circular but cut-off.
Goal:
My Code:
let circlePath = UIBezierPath(ovalIn: CGRect(x: innerRect.minX, y: innerRect.minY, width: innerRect.width, height: innerRect.height))
if trackBackgroundColor != UIColor.clear {
trackBackgroundColor.setFill()
circlePath.fill();
}
if trackBorderWidth > 0 {
circlePath.lineWidth = trackBorderWidth
trackBorderColor.setStroke()
circlePath.stroke()
}
// progress Drawing
let progressPath = UIBezierPath()
let progressRect: CGRect = CGRect(x: innerRect.minX, y: innerRect.minY, width: innerRect.width, height: innerRect.height)
let center = CGPoint(x: progressRect.midX, y: progressRect.midY)
let radius = progressRect.width / 2.0
let startAngle:CGFloat = clockwise ? CGFloat(-internalProgress * Double.pi / 180.0) : CGFloat(constants.twoSeventyDegrees * Double.pi / 180)
let endAngle:CGFloat = clockwise ? CGFloat(constants.twoSeventyDegrees * Double.pi / 180) : CGFloat(-internalProgress * Double.pi / 180.0)
progressPath.addArc(withCenter: center, radius:radius, startAngle:startAngle, endAngle:endAngle, clockwise:!clockwise)
Current Output:
How do I draw the custom circle described as Goal.
Here's a rough implementation of what you need. This draws the two arcs.
class CircularProgressView: UIView {
var trackBackgroundColor = UIColor.lightGray
var trackBorderWidth: CGFloat = 10
var progressColor = UIColor.red
var percent: Double = 0 {
didSet {
setNeedsDisplay()
}
}
// Adjust these to meet your needs. 90 degrees is the bottom of the circle
static let startDegrees: CGFloat = 120
static let endDegrees: CGFloat = 60
override func draw(_ rect: CGRect) {
let startAngle: CGFloat = radians(of: CircularProgressView.startDegrees)
let endAngle: CGFloat = radians(of: CircularProgressView.endDegrees)
let progressAngle = radians(of: CircularProgressView.startDegrees + (360 - CircularProgressView.startDegrees + CircularProgressView.endDegrees) * CGFloat(max(0.0, min(percent, 1.0))))
let center = CGPoint(x: bounds.midX, y: bounds.midY)
let radius = min(center.x, center.y) - trackBorderWidth / 2 - 10
print(startAngle, endAngle, progressAngle)
let trackPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
let progressPath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: progressAngle, clockwise: true)
trackPath.lineWidth = trackBorderWidth
trackPath.lineCapStyle = .round
progressPath.lineWidth = trackBorderWidth
progressPath.lineCapStyle = .round
trackBackgroundColor.set()
trackPath.stroke()
progressColor.set()
progressPath.stroke()
}
private func radians(of degrees: CGFloat) -> CGFloat {
return degrees / 180 * .pi
}
}
let progress = CircularProgressView(frame: CGRect(x: 0, y: 0, width: 500, height: 400))
progress.backgroundColor = .white
progress.percent = 0.95

Inside gradient color UIBezierPath

I need to fill my bezier path with a gradient color. I can fill the background on the graph but not the content of the bezier. Any idea why?
//: Playground - noun: a place where people can play
import Foundation
import UIKit
import CoreGraphics
import QuartzCore
class DemoView: UIView {
override func draw(_ rect: CGRect) {
let origin = CGPoint(x: frame.size.width / 2, y: frame.size.height / 2)
let radius = frame.size.width / 2
// self.createCircle(origin: origin, radius: radius)
self.addLinesInCircle(origin: origin, radius: radius)
}
func createCircle(origin: CGPoint, radius: CGFloat) {
let path = UIBezierPath()
path.addArc(withCenter: origin, radius: radius, startAngle: 0, endAngle: CGFloat(2 * Double.pi), clockwise: true)
path.close()
UIColor.clear.setFill()
path.fill()
}
func addLinesInCircle(origin: CGPoint, radius: CGFloat) {
let bezier = UIBezierPath()
let incrementAngle: CGFloat = CGFloat.pi / 24
let ratios: [CGFloat] = [3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6,
3/6, 5/6, 3/6, 1/6, 5/6, 2/6, 4/6, 2/6, 4/6, 4/6, 4/6, 4/6]
for (index, ratio) in ratios.enumerated() {
let point = CGPoint(x: origin.x + cos(CGFloat(index) * incrementAngle) * radius * ratio,
y: origin.y + sin(CGFloat(index) * incrementAngle) * radius * ratio)
if index == 0 {
bezier.move(to: point)
} else {
bezier.addLine(to: point)
}
}
bezier.close()
let layer = CAGradientLayer()
layer.frame = bezier .bounds
layer.colors = [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor ,UIColor.black.cgColor]
let mask = CAShapeLayer()
mask.frame = bezier.bounds
mask.path = bezier.cgPath
mask.fillColor = UIColor.black.cgColor
layer.mask = mask
self.layer.addSublayer(layer)
self.layer.addSublayer(mask)
}
}
let demoView = DemoView(frame: CGRect(x: 0, y: 0, width: 1000, height: 1000))
Here is the result. I need the exact opposite, assign the gradient to the bezier.
(I directly used the xcode playground in order to test)
One option is to use CGGradient along with using the bezier path as a clipping region. No need for layers.
Replace everything after closing the path with:
let gradient = CGGradient(colorsSpace: nil, colors: [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.yellow.cgColor ,UIColor.black.cgColor] as CFArray, locations: nil)!
let ctx = UIGraphicsGetCurrentContext()!
ctx.saveGState()
// Clip to the path
bezier.addClip()
// Draw the gradient in the clipped region
ctx.drawLinearGradient(gradient, start: CGPoint(x: 0, y: 0), end: CGPoint(x: 0, y: frame.height), options: [])
ctx.restoreGState()

How to draw a semi-circle using swift iOS 9 and on the basis of one value draw angle and fill that only part with color

I want to draw the two semi circles like this as shown in picture (the below one)
I'm trying it but did not get anything.
Tried some chart api and a few code to draw pie chart from stackoverflow but they need to edit and I don't know about Core Graphics.
I am working on Xcode 7.3.1 and iOS 9.
My Question is:
How do I draw a semi-circle which take one value and first convert that value to get its equivalent angle and then draw an arc of this angle and fill color in that part?
The below code runs in the XCode iOS Playground. It creates a custom UIView class and draws two pie slices. The start and end angle are specified in percent of a full circle.
You can easily extend it to display more or less slices depending on the data you have.
The drawRect method creates a bezier path that starts in the center, then adds an arc segment and finally closes the path so it can be filled.
Xcode 10.2.1/Swift 4.2 Update
class PieChart : UIView {
override func draw(_ rect: CGRect) {
drawSlice(rect: rect, startPercent: 0, endPercent: 50, color: .green)
drawSlice(rect: rect, startPercent: 50, endPercent: 75, color: .red)
}
private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
let radius = min(rect.width, rect.height) / 2
let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
let path = UIBezierPath()
path.move(to: center)
path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.close()
color.setFill()
path.fill()
}
}
let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = .clear
An Unnamed Earlier Version
import UIKit
class PieChart : UIView {
override func drawRect(rect: CGRect) {
drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
drawSlice(rect, startPercent: 50, endPercent: 75, color: UIColor.redColor())
}
private func drawSlice(rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
let radius = min(rect.width, rect.height) / 2
let startAngle = startPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
let endAngle = endPercent / 100 * CGFloat(M_PI) * 2 - CGFloat(M_PI)
let path = UIBezierPath()
path.moveToPoint(center)
path.addArcWithCenter(center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.closePath()
color.setFill()
path.fill()
}
}
let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clearColor()
My issue has been resolved.
We just need to do a little change in the first line to make it like as in picture's semicircle:
drawSlice(rect, startPercent: 0, endPercent: 50, color: UIColor.greenColor())
drawSlice(rect, startPercent: 0, endPercent: 25, color: UIColor.redColor())
Codo's code in Swift 3:
import UIKit
class PieChart : UIView {
override func draw(_ rect: CGRect) {
drawSlice(rect, startPercent: 0, endPercent: 50, color: .green)
drawSlice(rect, startPercent: 50, endPercent: 75, color: .red)
}
private func drawSlice(_ rect: CGRect, startPercent: CGFloat, endPercent: CGFloat, color: UIColor) {
let center = CGPoint(x: rect.origin.x + rect.width / 2, y: rect.origin.y + rect.height / 2)
let radius = min(rect.width, rect.height) / 2
let startAngle = startPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
let endAngle = endPercent / 100 * CGFloat.pi * 2 - CGFloat.pi
let path = UIBezierPath()
path.move(to: center)
path.addArc(withCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: true)
path.close()
color.setFill()
path.fill()
}
}
let pieChart = PieChart(frame: CGRect(x: 0.0, y: 0.0, width: 300.0, height: 300.0))
pieChart.backgroundColor = UIColor.clear