Нарисуйте форму поверх изображения с высоким разрешением?

Question

Я хочу, чтобы иметь возможность рисовать линию над фотографией высокого разрешения (например, 8-мегапиксельное изображение) в определенном месте.

Это довольно простая вещь, и есть много сообщений об этом, но моя проблема в том, что CGontext «пространство рисования» не похоже на изображение с высоким разрешением.

Я могу нарисовать линию и сохранить изображение, но моя проблема заключается в рисовании линии в определенном месте. Мои координатные пространства кажутся разными. Я думаю, что должен быть масштабный фактор, который мне не хватает, или мое понимание просто испортилось.

Так что мой вопрос:

Как нарисовать на образа, то есть «аспект подходит» к экрану (но гораздо более высокое разрешение) и иметь рисунок (в этом случае линия) будет в том же положении на экране и окончательном полном разрешенном изображении?

Пример изображения:

Красная линия является линией Я рисую. Он должен перейти от центра начальной цели (центр) к центру конечной цели (theEnd).

Я упростил функцию рисования вниз для публикации здесь, но я подозреваю, что это все мое мышление/подход, который является неправильным.

import UIKit 

class ViewController: UIViewController { 

@IBOutlet weak var imageView: UIImageView! 
@IBOutlet weak var theTarget: UIImageView! 
@IBOutlet weak var theEnd: UIImageView! 

var lineColor = UIColor.redColor() 
var targetPos : CGPoint! 
var endPos : CGPoint! 
var originalImage : UIImage! 

override func viewDidLoad() { 
    super.viewDidLoad() 

    imageView.image = UIImage(named: "reference.jpg") 
    originalImage = imageView.image 

    drawTheLine() 
} 


func drawTheLine() { 
    UIGraphicsBeginImageContext(originalImage!.size); 

    // Draw the original image as the background 
    originalImage?.drawAtPoint(CGPointMake(0, 0)) 

    // Pass 2: Draw the line on top of original image 
    let context = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(context, 10.0); 

    targetPos = theTarget.frame.origin 
    endPos = theEnd.frame.origin 

    CGContextMoveToPoint(context, targetPos.x, targetPos.y); 
    CGContextAddLineToPoint(context, endPos.x, endPos.y) 
    CGContextSetStrokeColorWithColor(context, lineColor.CGColor) 
    CGContextStrokePath(context); 

    imageView.image = UIGraphicsGetImageFromCurrentImageContext() 
} 

@IBAction func saveButton(sender: AnyObject) { 
    // Create new image 

    let newImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    UIImageWriteToSavedPhotosAlbum(newImage!, nil, nil, nil) 
} 


override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning() 
    // Dispose of any resources that can be recreated. 
} 


@IBAction func handlePan(recognizer:UIPanGestureRecognizer) { 
    let translation = recognizer.translationInView(self.view) 
    if let view = recognizer.view { 
     view.center = CGPoint(x:view.center.x + translation.x, 
      y:view.center.y + translation.y) 
    } 
    recognizer.setTranslation(CGPointZero, inView: self.view) 

    //redraw the line 
    drawTheLine() 

    print("the start pos of the line is: ", theTarget.frame.origin, " and end pos is: ", theEnd.frame.origin) 

} 


} 

Answer 1

У меня была эта проблема точно некоторое время назад, так что я написал UIImageView расширение, которое отображает координаты вида изображения в в координатах изображения, когда режим заливки .ScaleAspectFit.

extension UIImageView { 

    func pointInAspectScaleFitImageCoordinates(point:CGPoint) -> CGPoint { 

     if let img = image { 

      let imageSize = img.size 
      let imageViewSize = frame.size 

      let imgRatio = imageSize.width/imageSize.height // The ratio of the image before scaling. 
      let imgViewRatio = imageViewSize.width/imageViewSize.height // The ratio of the image view 

      let ratio = (imgRatio > imgViewRatio) ? imageSize.width/imageViewSize.width:imageSize.height/imageViewSize.height // The ratio of the image before scaling to after scaling. 

      let xOffset = (imageSize.width-(imageViewSize.width*ratio))*0.5 // The x-offset of the image on-screen (as it gets centered) 
      let yOffset = (imageSize.height-(imageViewSize.height*ratio))*0.5 // The y-offset of the image on-screen (as it gets centered) 

      let subImgOrigin = CGPoint(x: point.x*ratio, y: point.y*ratio); // The origin of the image (relative to the origin of the view) 

      return CGPoint(x: subImgOrigin.x+xOffset, y: subImgOrigin.y+yOffset); 
     } 
     return CGPointZero 
    } 
} 

Вы должны быть в состоянии использовать это в вашей drawTheLine функции довольно легко:

func drawTheLine() { 
    UIGraphicsBeginImageContext(originalImage!.size); 

    // Draw the original image as the background 
    originalImage?.drawAtPoint(CGPointMake(0, 0)) 

    // Pass 2: Draw the line on top of original image 
    let context = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(context, 10.0); 

    targetPos = imageView.pointInAspectScaleFitImageCoordinates(theTarget.frame.origin) 
    endPos = imageView.pointInAspectScaleFitImageCoordinates(theEnd.frame.origin) 

    CGContextMoveToPoint(context, targetPos.x, targetPos.y); 
    CGContextAddLineToPoint(context, endPos.x, endPos.y) 
    CGContextSetStrokeColorWithColor(context, lineColor.CGColor) 
    CGContextStrokePath(context); 

    imageView.image = UIGraphicsGetImageFromCurrentImageContext() 
}