CGPoint
is a struct used to represent an x and y coordinate in a 2D plane. This post presents examples of how Lottie and Charts, two popular Cocoapods with over 44,000 combined GitHub stars, use CGPoint
in Swift:
Compute CGRect Corners and Center
Lottie contains a custom implemented utility extension called MathKit (source) that extends CGRect
.
The extension uses CGPoint
to represent the center and corners of the added CGRect
properties:
extension CGRect {
// Implement a getter and setter for the center
// of the on CGRect
var center: CGPoint {
get {
return CGPoint(x: midX, y: midY)
}
set {
origin = CGPoint(
x: newValue.x - (size.width * 0.5),
y: newValue.y - (size.height * 0.5)
)
}
}
// Implement a getter and setter for the top left
// corner of the CGRect
var topLeft: CGPoint {
get {
return CGPoint(x: minX, y: minY)
}
set {
origin = CGPoint(
x: newValue.x,
y: newValue.y
)
}
}
// Implement a getter and setter for the bottom left
// corner of the CGRect
var bottomLeft: CGPoint {
get {
return CGPoint(x: minX, y: maxY)
}
set {
origin = CGPoint(
x: newValue.x,
y: newValue.y - size.height
)
}
}
// Implement a getter and setter for the top right
// corner of the CGRect
var topRight: CGPoint {
get {
return CGPoint(x: maxX, y: minY)
}
set {
origin = CGPoint(
x: newValue.x - size.width,
y: newValue.y
)
}
}
// Implement a getter and setter for the bottom right
// corner of the CGRect
var bottomRight: CGPoint {
get {
return CGPoint(x: maxX, y: maxY)
}
set {
origin = CGPoint(
x: newValue.x - size.width,
y: newValue.y - size.height
)
}
}
}
Describe A CoreGraphics Path
One of the ways Charts uses CGPoint
is to create a path when drawing with CoreGraphics (source). In this example, Charts uses CGPoint
to create a triangle path:
// In this example context is a CGContext,
// which provides an interface to draw with
// setFillColor sets the drawing color to color.cgColor
context.setFillColor(color.cgColor)
// beginPath starts creating a path
context.beginPath()
// move and addLine specify how to append to the path
context.move(to:
CGPoint(
x: point.x,
y: point.y - shapeHalf
)
)
context.addLine(to:
CGPoint(
x: point.x + shapeHalf,
y: point.y + shapeHalf
)
)
context.addLine(to:
CGPoint(
x: point.x - shapeHalf,
y: point.y + shapeHalf
)
)
// closePath followed by fillPath fills the path
// with the fill color in the draw buffer
context.closePath()
context.fillPath()
Respond To Rotation Gestures
Another way Charts uses CGPoint
is to handle rotation gestures (source). Gesture recognizers use CGPoint
to represent the location a user touches the device’s screen. Charts implements a number of methods to handle rotation gestures at a specific location, a CGPoint argument:
processRotationGestureBegan(location: CGPoint)
processRotationGestureMoved(location: CGPoint)
processRotationGestureEnded(location: CGPoint)
When processing touch locations, a common operation is to get the distance between touches. Charts implements a distance(from:, to:)
method taking in two CGPoint
parameters (source):
private func distance(from: CGPoint, to: CGPoint) -> CGFloat {
let dx = from.x - to.x
let dy = from.y - to.y
return sqrt(dx * dx + dy * dy)
}
CGPoint Examples in Swift
That’s it! By using CGPoint
, you can compute attributes of 2D representations like CGRect
, describe paths with CoreGraphics, and better handle gestures in Swift.