Xcode iOS Notability "zoom box"

Question

Notability and other note taking apps have this 'zoom box' feature where you can draw in the magnified box at the bottom. Users can also drag the box at the top to change what they want magnified at the bottom. I have tried literally everything I can think of to add this feature in my app. I have added the same document in two views but then I run into many memory issues, I've duplicated the file but again memory issues. Does anyone know a simple way to do this? Is there anyway I can just have a view that is a magnification of another view?

Answer 1

Create a new Cocoa Touch Class (optionally name it MagnifyView) and set it as a subclass of UIView Add the following code in your class:

var viewToMagnify: UIView!
var touchPoint: CGPoint!

override init(frame: CGRect)
{
    super.init(frame: frame)
    commonInit()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    commonInit()
}

func commonInit()
{
    // Set border color, border width and corner radius of the magnify view
    self.layer.borderColor = UIColor.lightGray.cgColor
    self.layer.borderWidth = 3
    self.layer.cornerRadius = 50
    self.layer.masksToBounds = true
}

func setTouchPoint(pt: CGPoint)
{
    touchPoint = pt
    self.center = CGPoint(x: pt.x, y: pt.y - 100)
}

override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    context!.translateBy(x: 1 * (self.frame.size.width * 0.5), y: 1 * (self.frame.size.height * 0.5))
    context!.scaleBy(x: 1.5, y: 1.5) // 1.5 is the zoom scale
    context!.translateBy(x: -1 * (touchPoint.x), y: -1 * (touchPoint.y))
    self.viewToMagnify.layer.render(in: context!)
}

To use it, implement touchesBegan, touchesMoved and touchesEnd functions in View Controller which you want to have the magnifying effect.

Here is how:

override func touchesBegan(_ touches: Set, with event: UIEvent?) {
    let point = touches.first?.location(in: self.view)
    if magnifyView == nil
    {
        magnifyView = MagnifyView.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        magnifyView.viewToMagnify = self.view
        magnifyView.setTouchPoint(pt: point!)
        self.view.addSubview(magnifyView)
    }
}

override func touchesEnded(_ touches: Set, with event: UIEvent?) {
    if magnifyView != nil
    {
        magnifyView.removeFromSuperview()
        magnifyView = nil
    }
}

override func touchesMoved(_ touches: Set, with event: UIEvent?) {
    let point = touches.first?.location(in: self.view)
    magnifyView.setTouchPoint(pt: point!)
    magnifyView.setNeedsDisplay()
}

original source here