Draw a rolling line in a UIView - swift3

Question

I have the following view in IB (Using Swift 3)
The green UIImageView is nested inside a UIView.
When I press begin, I'd ike to draw a line, indication the sound level currently beeing recorded.
I'm very new to Core Graphics, and have found the following code in SO that explains how to draw on a UYIImageView.
func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0)
plotArea.image?.draw(in: view.bounds)
let context = UIGraphicsGetCurrentContext()
context?.move(to: fromPoint)
context?.addLine(to: toPoint)
context?.setLineCap(CGLineCap.round)
context?.setLineWidth(brushWidth)
context?.setStrokeColor(red: red, green: green, blue: blue, alpha: 1.0)
context?.setBlendMode(CGBlendMode.normal)
context?.strokePath()
plotArea.image = UIGraphicsGetImageFromCurrentImageContext()
plotArea.alpha = opacity
UIGraphicsEndImageContext()
}
This draws a nice line, when called, inside the green UIImageView (called plotArea). What I want to happen is that the line draws on top of the UIView (called rangeView) (indicating to the user, that when the line is over the green imageview, he's at the correct level)
Can anyone point me towards refactoring my drawLine function to draw on the UIView in stead of the UIImageView
When I solve that, I will also need for the line to be drawn continuously - meaning that when it reaches 2/3 of the view, it should continue drawing at that fixed x coordinate, and disappear to the left (like a rolling line)
Right now I'm calling the drawLine func every 0.1 seconds with this function:
func animatePin() {
let viewHeight = self.rangeView.frame.height
let ypos = viewHeight/maxDb*CGFloat(self.calculateLevel())
let p = CGPoint(x:self.lastPoint.x+10, y: ypos)
self.drawLine(from: self.lastPoint, to: p)
self.lastPoint = p
}
EDIT: Solved the first part, by calling this method in stead:
func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {
let path = UIBezierPath()
path.move(to: start)
path.addLine(to: end)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = lineColor.cgColor
shapeLayer.lineWidth = 1.0
view.layer.addSublayer(shapeLayer)
}
EDIT2 - Managed to get the line "rolling" by refactoring the function to
func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {
let path = UIBezierPath()
path.move(to: start)
path.addLine(to: end)
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = lineColor.cgColor
shapeLayer.lineWidth = 1.0
if(end.x > view.frame.width*0.95){
let newRect = CGRect(x: view.frame.origin.x-10, y: view.frame.origin.y, width: view.frame.width+10, height: view.frame.height)
view.frame = newRect
}
if(start != CGPoint.zero){
view.layer.addSublayer(shapeLayer)
}
}

Answer 1

Function to draw the line:
func drawLineFromPoint(start : CGPoint, toPoint end:CGPoint, ofColor lineColor: UIColor, inView view:UIView) {
//create a path
let path = UIBezierPath()
path.move(to: start)
path.addLine(to: end)
//create a shape, and add the path to it
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
shapeLayer.strokeColor = lineColor.cgColor
shapeLayer.lineWidth = 1.0
//if we are at the end of the view, move the view left by 10, and add the 10 to the right, making it roll
if(end.x > view.frame.width*0.95){
let newRect = CGRect(x: view.frame.origin.x-10, y: view.frame.origin.y, width: view.frame.width+10, height: view.frame.height)
view.frame = newRect
}
//wait till there iss data to show, so we don't get a huge spike from 0.0
if(start != CGPoint.zero){
view.layer.addSublayer(shapeLayer)
}
}