How to prevent multiple lines being drawn at once (swift)? - ios

Question

When I draw a line slowly, I believe it detects it as multiple lines instead of one, so it darkens the line too much.
I’m following this tutorial https://www.raywenderlich.com/5895-uikit-drawing-tutorial-how-to-make-a-simple-drawing-app
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else {
return
}
swiped = false
lastPoint = touch.location(in: view)
}
func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
//1
UIGraphicsBeginImageContext(view.frame.size)
guard let context = UIGraphicsGetCurrentContext() else {
return
}
tempImageView.image?.draw(in: view.bounds)
//2
context.move(to: fromPoint)
context.addLine(to: toPoint)
//3
context.setLineCap(.round)
context.setBlendMode(.normal)
context.setLineWidth(brushWidth)
context.setStrokeColor(color.cgColor)
context.setStrokeColor(UIColor(red: red,
green: green,
blue: blue,
alpha: opacity).cgColor)
//4
context.strokePath()
//5
tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
tempImageView.alpha = opacity
UIGraphicsEndImageContext()
}
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
guard let touch = touches.first else {
return
}
//6
swiped = true
let currentPoint = touch.location(in: view)
drawLine(from: lastPoint, to: currentPoint)
//7
lastPoint = currentPoint
}
override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
if !swiped {
//draw a single point
drawLine(from: lastPoint, to: lastPoint)
}
//merge tempImageView into mainImageView
UIGraphicsBeginImageContext(mainImageView.frame.size)
mainImageView.image?.draw(in: view.bounds, blendMode: .normal, alpha: 1.0)
tempImageView?.image?.draw(in: view.bounds, blendMode: .normal, alpha: opacity)
mainImageView.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tempImageView.image = nil
}
When I draw over it, it is hard to see that it darkens the point where they intersect. I would like it to be more noticeable. In this picture, opacity is set to 0.5.
The areas that have dots on the lines is where I drew really quickly. Where it is solid is where I drew the lines slowly. I would like for all lines to look like the quickly-drawn lines — minus the dots of course.

Answer 1

You can change the blend mode of draw line context to .copy for get the same color
From
//3
context.setBlendMode(.normal)
to
//3
context.setBlendMode(.copy)