Unexpected behavior in scaling CAShapeLayer - ios

Question

I am using the following code to scale a CAShapelayer instance (i.e., self.view.layer.sublayers![0]):
class ViewController: UIViewController {
override func viewDidLoad()
{
super.viewDidLoad()
self.view = Map(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height))
let pinchGR = UIPinchGestureRecognizer(target: self, action: #selector(self.didPinch(_:)))
self.view.addGestureRecognizer(pinchGR)
}
#objc func didPinch(_ pinchGR: UIPinchGestureRecognizer)
{
let transformation = CGAffineTransform(a: pinchGR.scale, b: 0, c: 0, d: pinchGR.scale, tx: 0, ty: 0)
if pinchGR.state == .began || pinchGR.state == .changed
{
self.view.layer.sublayers![0].setAffineTransform(transformation)
}
}}
class Map: UIView{
override init(frame: CGRect)
{
super.init(frame: frame)
self.backgroundColor = UIColor.blue
drawTestShape()
}
required init?(coder aDecoder: NSCoder)
{
super.init(coder: aDecoder)
}
func drawTestShape()
{
let shapeLayer = CAShapeLayer()
shapeLayer.frame = self.frame
let path = UIBezierPath()
shapeLayer.lineWidth = 5.0
shapeLayer.fillColor = nil
shapeLayer.strokeColor = UIColor.white.cgColor
shapeLayer.backgroundColor = UIColor.red.cgColor
path.move(to: CGPoint(x:200,y:200))
path.addLine(to: CGPoint(x:300,y:300))
path.addLine(to: CGPoint(x:100,y:300))
path.close()
shapeLayer.path = path.cgPath
self.layer.addSublayer(shapeLayer)
}}
The scaling is performed correctly in the first pinch gesture. However, when a second pinch gesture is applied, the CAShapelayer instance starts again from its initial size, and not from the size it had after the first gesture.

Answer 1

I can't really get behind the idea of scaling a layer, but if you must do it, try something more like this; this is the standard pattern for implementing a pinch gesture recognizer, so it's really best to stick with it:
#IBAction func didPinch(_ pinchGR: UIPinchGestureRecognizer) {
self.view.layer.sublayers![0].setAffineTransform(
self.view.layer.sublayers![0].affineTransform().scaledBy(
x:pinchGR.scale, y:pinchGR.scale))
pinchGR.scale = 1.0;
}