Last time I showed how I had written a control for inputting an angle. This time I am improving the look of the control as well as adding touch input.

But first I want to make an improvement to the code. Now the angle is stored as a `CGFloat`

value with convenience functions to convert between radians and degrees. However, this means that it is up to me to remember in which unit the value is at any given moment. Turns out SwiftUI has a struct that solves this: `Angle`

. You instantiate it with `Angle.degrees(90)`

or `Angle.radians(.pi)`

and you can ask for the angle in either unit with `.degrees`

and `.radians`

.

Now however, things get a bit weird. Sadly the animation has stopped working. Tapping on the stepper makes the line jump instead of animating. Turns out that while `Angle`

conforms to the `Animatable`

protocol itself, it doesn’t conform to the `VectorArithmetic`

protocol. This is needed for the `Shape`

to be animatable. Conforming to `VectorArithmetic`

also means conforming to `AdditiveArithmetic`

.

Luckily it is simple enough to implement.

```
extension Angle: VectorArithmetic {
public mutating func scale(by rhs: Double) {
self = .radians(self.radians * rhs)
}
public var magnitudeSquared: Double {
self.radians * self.radians
}
}
extension Angle: AdditiveArithmetic {
public static var zero: Self { .radians(0) }
public static func + (lhs: Self, rhs: Self) -> Self {
.radians(lhs.radians + rhs.radians)
}
public static func += (lhs: inout Self, rhs: Self) {
lhs = .radians(lhs.radians + rhs.radians)
}
public static func - (lhs: Self, rhs: Self) -> Self {
.radians(lhs.radians - rhs.radians)
}
public static func -= (lhs: inout Self, rhs: Self) {
lhs = .radians(lhs.radians - rhs.radians)
}
}
```

And just by adding those two conformances the input animates again!

Next I want draw a wedge shape to fill the space between the two lines. To be able to draw this wedge in a different color I need to create a separate shape. Here having the angle in the `Angle`

struct is convenient as that can be used in the call to draw a part of an arc.

```
struct WedgeShape: Shape {
var angle: Angle
var animatableData: Angle {
get { angle }
set { angle = newValue }
}
var insets: UIEdgeInsets = .init(top: 100, left: 100, bottom: 100, right: 100)
func path(in rect: CGRect) -> Path {
let insetRect = rect.inset(by: insets)
assert(insetRect.width == insetRect.height, "Rect must be square")
var path = Path()
let center = CGPoint(x: insetRect.maxX, y: insetRect.maxY)
let radius: CGFloat = insetRect.maxX - insetRect.minX
let startAngle = Angle.degrees(-180)
let endAngle = startAngle + angle
path.addArc(center: center, radius: radius - 20, startAngle: startAngle, endAngle: endAngle, clockwise: false)
path.addArc(center: center, radius: radius - 40, startAngle: endAngle, endAngle: startAngle, clockwise: true)
path.closeSubpath()
return path
}
}
```

Now I have two shapes: `WedgeShape`

and `AngleShape`

which can each have the desired fill or stroke colors and be stacked on top of each other using a `ZStack`

.

Having an input control that doesn’t take touch isn’t much of a control. Next up is adding the ability to use your finger to drag the angle.

A `DragGesture`

can facilitate this. When the drag gesture recognizes a change I set the variable `isEditing`

to true so that the view can show the user it is being manipulated. And more importantly, the new angle is calculated from the point of rotation to where the user touches the control. Here I am using `atan2`

which takes care of the division so you don’t have to worry about dividing by zero.

When the drag ends, the variable `isEditing`

should be false again.

```
@State var isEditing: Bool = false
var dragGesture: some Gesture {
DragGesture()
.onChanged { value in
isEditing = true
let corner = CGPoint(x: 300, y: 300)
let deltaX = corner.x - value.location.x
let deltaY = corner.y - value.location.y
let dragAngle = atan2(deltaY, deltaX)
angle = .radians(dragAngle)
}
.onEnded { value in
isEditing = false
}
}
```

Now I am ready to add the gesture to the `AngleView`

using the view modifier `.gesture(dragGesture)`

.

Now, while this works, it doesn’t feel very responsive. The UI feels laggy. This is because the change in angle is animated, so when changing the angle from the drag gesture animations should be disabled. To achieve this I wrapped the line where the angle is set in a `Transaction`

which has animations disabled.

```
var transaction = Transaction(animation: .none)
transaction.disablesAnimations = true
withTransaction(transaction) {
angle = .radians(dragAngle)
}
```

To let the user know the control is being edited I pass the value of the `isEditing`

var to the `AngleShape`

and draw a circle at the end of the path.

```
if isEditing {
let editCircleRect = CGRect(origin: CGPoint(x: x - 10, y: y - 10), size: CGSize(width: 20, height: 20))
path.addEllipse(in: editCircleRect)
}
```

You can find all the code created in this post on GitHub.

]]>The idea for this first step is quite simple: draw a shape consisting of two lines on screen representing an angle between 0 and 90 degrees.

Above the shape I’ll add a label called “Angle” and use the `arrow.clockwise`

symbol from SF Symbols. Below the shape a `Stepper`

control displays the current angle. For now it suffices to store the angle in an `@State`

var. Later on this can be exposed as an `@Binding`

.

```
struct AngleView: View {
@State var angle: CGFloat = 45
var body: some View {
VStack {
Label("Angle", systemImage: "arrow.clockwise")
AngleShape(angle: angle)
Stepper("\(Int(round(angle)))°", value: $angle, step: 5)
}
}
}
```

When the angle is changed through the stepper, I want to animate the change. To let SwiftUI know how to change the shape between two angles a new struct conforming to the `Shape`

protocol is needed. This is done in the method `func path(in rect: CGRect) -> Path`

. The `Shape`

protocol in turn conforms to the `Animatable`

protocol, which adds a `var animatableData`

to the struct.

So I create a new struct called AngleShape. For this shape just the angle is enough to be able create a path for all values between two angles, so the `animatableData`

is a `CGFloat`

.

```
struct AngleShape: Shape {
var angle: CGFloat
var animatableData: CGFloat {
get { angle }
set { angle = newValue }
}
func path(in rect: CGRect) -> Path {
// …
}
}
```

It looks better if there is some additional space around the angle, so I am adding edge insets. The calculation of the first two points is then simple enough after insetting the passed in rect. The third point can be calculated with some trigonometry. Here paper and pencil are still essential tools for developers! Just be sure that the used rect is square so the hypotenuse is always the same lenght.

```
var insets: UIEdgeInsets = .init(top: 100, left: 100, bottom: 100, right: 100)
func path(in rect: CGRect) -> Path {
let insetRect = rect.inset(by: insets)
assert(insetRect.width == insetRect.height, "Rect must be square")
var path = Path()
path.move(to: CGPoint(x: insetRect.minX, y: insetRect.maxY))
path.addLine(to: CGPoint(x: insetRect.maxX, y: insetRect.maxY))
let angleInRadians = angle.degreesToRadians()
let hypotenuse: CGFloat = insetRect.maxX - insetRect.minX
let adjacent = hypotenuse * cos(angleInRadians)
let opposite = hypotenuse * sin(angleInRadians)
let x = insetRect.minX + hypotenuse - adjacent
let y = insetRect.minY + hypotenuse - opposite
path.addLine(to: CGPoint(x: x, y: y))
return path
}
```

In the above calculation the angle is given in degrees, since that’s easiest for the user, but to use it with Swift it needs to converted to radians. This is done by adding an extension on `CGFloat`

.

```
extension CGFloat {
func radiansToDegrees() -> CGFloat {
self * 360 / (.pi * 2)
}
func degreesToRadians() -> CGFloat {
self * .pi * 2 / 360
}
}
```

The AngleShape is now ready to be used. I used a somewhat abritrary frame of 400 by 400 pixels. A good choice of color is `.foreground`

so that it looks as expected in both light and dark mode. For the `StrokeStyle`

use rounded line caps and line joins to avoid the issue where the pointy bit of the angle becomes long or gets replaced by a bevel. Lastly add `.animation(.default, value: angle)`

to let SwiftUI animate the angle changes.

```
struct AngleView: View {
@State var angle: CGFloat = 45
var body: some View {
VStack {
Label("Angle", systemImage: "arrow.clockwise")
.font(.title)
AngleShape(angle: angle)
.stroke(.foreground, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
.frame(width: 400, height: 400)
.animation(.default, value: angle)
Stepper("\(Int(round(angle)))°", value: $angle, step: 5)
}
}
}
```

You can find all the code created in this post on GitHub.

]]>