title: Drawing on UIImage in UIScrollView
body: <p><strong>The Problem</strong></p>
  
  <p>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.</p>
  
  <p><strong>About The Code</strong></p>
  
  <p><code>cameraStill</code> is the image view containing the image</p>
  
  <p><code>drawable</code> is the height of the image</p>
  
  <p><code>myScroll</code> is the scroll view for the image</p>
  
  <p><code>mainImageView</code>, <code>tempImageView</code>, <code>undo1</code>, <code>undo2</code>, <code>undo3</code> are the drawing layers</p>
  
  <p><code>drawScroll</code> is the scroll view for the drawing layers</p>
  
  <p><strong>Image Selection</strong></p>
  
  <pre><code>func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage!, editingInfo: [NSObject : AnyObject]!) {
          self.dismissViewControllerAnimated(true, completion: { () -&gt; 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) &gt; (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
  
      }
  </code></pre>
  
  <p><strong>Drawing</strong></p>
  
  <pre><code>override func touchesBegan(touches: Set&lt;NSObject&gt;, 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 &gt; 50 &amp;&amp; fromPoint.y &lt; screenHeight-80 &amp;&amp; toPoint.y &gt; 50 &amp;&amp; toPoint.y &lt; 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&lt;NSObject&gt;, 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&lt;NSObject&gt;, 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
          }
  </code></pre>
  
  <p><strong>Synching Both Scroll Views</strong></p>
  
  <pre><code>func scrollViewDidScroll(scrollView: UIScrollView) {
          if (scrollView == drawScroll) {
              var offset = scrollView.contentOffset
              myScroll.setContentOffset(offset, animated: false)
          }
      }
  </code></pre>