Drawing on UIImage in UIScrollView - swift

Question

The Problem
This is going to sound crazy. I'm making a drawing app and I want users to be able to draw on images that are bigger or smaller than the screen. So when the user selects an image from his photo library it is put into an image view in a scroll view. The user draws on image views that are the same dimensions as the selected image and in another scroll view on top of the other one. The scrolling of the two scroll views is synchronized so when you draw then scroll the drawing appears to be above the image (in the right place). For some reason however, when the user selects a long image (let's say 400 x 2000), the drawing works at the top of the image, but when you scroll down to draw, the lines you draw go to the top. I can't figure out what's going wrong... My code is below.
About The Code
cameraStill is the image view containing the image
drawable is the height of the image
myScroll is the scroll view for the image
mainImageView, tempImageView, undo1, undo2, undo3 are the drawing layers
drawScroll is the scroll view for the drawing layers
Image Selection
func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!) {
self.dismissViewControllerAnimated(true, completion: { () -> Void in
})
if (image != nil) {
self.cameraStill.contentMode = UIViewContentMode.ScaleAspectFit
cameraStill.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
// change uiimageivews size
mainImageView.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
tempImageView.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo1.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo2.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
undo3.frame = CGRectMake(0, 0, screenWidth, screenWidth*(image.size.height/image.size.width))
drawable = screenWidth*(image.size.height/image.size.width)
myScroll.contentSize = CGSize(width: screenWidth,height: screenWidth*(image.size.height/image.size.width))
drawScroll.contentSize = CGSize(width: screenWidth,height: screenWidth*(image.size.height/image.size.width))
if (screenWidth*(image.size.height/image.size.width) > (screenHeight-130)) {
myScroll.scrollEnabled = true
drawScroll.scrollEnabled = true
}
else {
myScroll.scrollEnabled = false
drawScroll.scrollEnabled = false
cameraStill.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
mainImageView.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
tempImageView.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo1.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo2.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
undo3.center = CGPoint(x: screenWidth/2, y: (screenHeight-130)/2)
}
self.camera!.stopCamera()
}
//drawView.alpha = 1.0
}
Drawing
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
println("began")
if (drawingEnabled == true) {
c1 = 3
closeAllExtras()
swiped = false
if let touch = touches.first as? UITouch {
lastPoint = touch.locationInView(self.view)
}
}
}
func drawLineFrom(fromPoint: CGPoint, toPoint: CGPoint) {
//if (fromPoint.y > 50 && fromPoint.y < screenHeight-80 && toPoint.y > 50 && toPoint.y < screenHeight-80) {
// 1
UIGraphicsBeginImageContext(CGSize(width: view.frame.size.width,height: drawable))
let context = UIGraphicsGetCurrentContext()
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable))
// 2
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
CGContextAddLineToPoint(context, toPoint.x, toPoint.y)
// 3
CGContextSetLineCap(context, kCGLineCapRound)
CGContextSetLineWidth(context, brushWidth)
CGContextSetRGBStrokeColor(context, red, green, blue, 1.0)
CGContextSetBlendMode(context, kCGBlendModeNormal)
// 4
CGContextStrokePath(context)
// 5
tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()
tempImageView.alpha = opacity
UIGraphicsEndImageContext()
//}
}
override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {
// 6
if (drawingEnabled == true) {
swiped = true
if let touch = touches.first as? UITouch {
let currentPoint = touch.locationInView(view)
drawLineFrom(lastPoint, toPoint: currentPoint)
// 7
lastPoint = currentPoint
}
}
}
func mergeViewContext(v1 : UIImageView, v2: UIImageView) {
UIGraphicsBeginImageContext(v1.frame.size)
v1.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
v2.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
v1.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
v2.image = nil
}
override func touchesEnded(touches: Set<NSObject>, withEvent event: UIEvent) {
if (drawingEnabled == true) {
if !swiped {
// draw a single point
drawLineFrom(lastPoint, toPoint: lastPoint)
}
mergeViewContext(mainImageView, v2: undo1)
undo1.image = undo2.image
undo2.image = nil
undo2.image = undo3.image
undo3.image = nil
UIGraphicsBeginImageContext(undo3.frame.size)
undo3.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: 1.0)
tempImageView.image?.drawInRect(CGRect(x: 0, y: 0, width: view.frame.size.width, height: drawable), blendMode: kCGBlendModeNormal, alpha: opacity)
undo3.image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
tempImageView.image = nil
}
Synching Both Scroll Views
func scrollViewDidScroll(scrollView: UIScrollView) {
if (scrollView == drawScroll) {
var offset = scrollView.contentOffset
myScroll.setContentOffset(offset, animated: false)
}
}

Answer 1

I got it to work by correcting the following values with the offset of the scroll view. However, I get some blurring for long images and a very strange bug with short ones. No idea what's wrong.
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y)
CGContextAddLineToPoint(context, toPoint.x, toPoint.y)