Swift CGContext Aspect Fit - ios

Question

I have two image views, one with an image, another with an image defined with CGContext methods, both with the same image size and image view size, on top of each other. In the storyboard, I can set both image views to "Aspect Fit", so users on different devices can still see the image. However, when I go to draw something on the overlaid second image view, it does not scale it accordingly (or relative to the first image view, even though they are the same size). How do I go about making the second image in the overlaid image view the same scale as the image below?
Example Code:
import CoreGraphics
import UIKit
class Map: UIViewController, UIScrollViewDelegate {
#IBOutlet weak var scrollView: UIScrollView!
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var drawnImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
self.scrollView.minimumZoomScale = 1.0
self.scrollView.maximumZoomScale = 6.0
let data = grabData()
print(data!)
var img = UIImage(named: "floor1")
print(img!.size)
imageView.image = img
img = draw(imageView.bounds.size, data: data!)
print(img!.size)
drawnImageView.image = img
for c in drawnImageView.constraints {
if c.identifier == "constraintImageHeight" {
c.constant = img!.size.height * drawnImageView.bounds.width / img!.size.width;
break;
}
}
}
}
func draw(img: UIImage) -> UIImage {
UIGraphicsBeginImageContext(img.size)
let context = UIGraphicsGetCurrentContext()
// Drawing
let color = UIColor(red: 0.67, green: 0.4, blue: 0.56, alpha: 1)
CGContextSetStrokeColorWithColor(context, color.CGColor)
CGContextSetLineWidth(context, 2.0)
var y = 0
for _ in 0..<100 {
let b = CGRect(origin: CGPoint(x: 0, y: y), size: CGSize(width: 1200, height: 1))
CGContextStrokeRect(context, b)
y += 30
}
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Update 1:
(replace after '//Drawing')
If you load with iPhone 5 simulator, it doesn't show up in the same place in relation to the photo as it does in the iPhone 6 simulator.
func draw(size: CGSize, data: [TotalLine]) -> UIImage {
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
let screen: CGRect = UIScreen.mainScreen().bounds
let x = screen.size.width, y = screen.size.height
// Drawing
//let color = UIColor(red: 0.67, green: 0.4, blue: 0.56, alpha: 1)
let color = UIColor.redColor()
CGContextSetStrokeColorWithColor(context, color.CGColor)
CGContextSetLineWidth(context, 2.0)
let line = CGRect(origin: CGPoint(x: (x/16), y: (y*0.502)), size: CGSize(width: (x/20), height: 2))
CGContextStrokeRect(context, line)
let test = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: x, height: y))
CGContextStrokeRect(context, test)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
Update 2:
iPhone 6:
iPhone 5:
I want that red line to show up in between the rooms, like in the iPhone 6 screenshot. In the iPhone 5, it is slightly lower.
Update 3:
Printing image views:
iPhone 5:
Drawn Image View: frame = (0 0; 600 536);
Image View: frame = (0 0; 600 536);
iPhone 6:
Drawn Image View: frame = (0 0; 600 536);
Image View: frame = (0 0; 600 536);

Answer 1

Try to replace this line:
UIGraphicsBeginImageContext(img.size)
with this:
UIGraphicsBeginImageContextWithOptions(img.size, false, UIScreen.main.scale)
It's not clear why do you use 100 and 1200 harcoded values. if your original image is big enough (higher than 3000 or wider than 1200), your lines won't fill the whole image. Also you don't actually need the original image to create overlay. You just need to know the size, right? Try this method instead:
func createLinesImage(size: CGSize) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
let context = UIGraphicsGetCurrentContext()!
let color = UIColor(red: 0.67, green: 0.4, blue: 0.56, alpha: 1)
context.setStrokeColor(color.cgColor)
context.setLineWidth(2.0)
var y = CGFloat(0)
while y < size.height {
let lineRect = CGRect(x: 0, y: y, width: size.width, height: 1)
context.stroke(lineRect)
y += 30
}
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
Now, If you want to draw lines only over the original image, call your method like this:
imageView2.image = createLinesImage(size: originalImage.size)
If you need to fill the whole imageView with lines, even if there are blank zones for your original image, use this line:
imageView2.image = createLinesImage(size: imageView2.bounds.size)