CGContextStrokePath no funciona al hacer zoom y dibujar imágenes

Estoy dibujando líneas de acuerdo con touchesMoved: método y normalmente funciona bien. Pero cuando acerco la image y dibujo, las líneas trazadas previamente se desplazan y se vuelven cada vez más borrosas, desapareciendo en última instancia. He intentado usar UIPinchGestureRecognizer y simplemente boost el frame de myImageView (solo para events multi-touch), pero el problema ocurre de ambas maneras. Aquí está el código para dibujar:

 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { NSArray *allTouches = [touches allObjects]; int count = [allTouches count]; if(count==1){//single touch case for drawing line UITouch *touch = [touches anyObject]; CGPoint currentPoint = [touch locationInView:myImageView]; UIGraphicsBeginImageContext(myImageView.frame.size); [drawImage.image drawInRect:CGRectMake(0, 0, myImageView.frame.size.width, myImageView.frame.size.height)]; CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound); CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 2.0); CGContextBeginPath(UIGraphicsGetCurrentContext()); CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y); CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y); CGContextStrokePath(UIGraphicsGetCurrentContext()); drawImage.image = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); lastPoint = currentPoint; } else{//multi touch case // handle pinch/zoom } } 

Aquí está la image dibujada sin zoom:

introduzca la descripción de la imagen aquí

Y esta es la image que representa el problema después del acercamiento con la flecha roja que muestra el segmento que ya estaba dibujado antes de hacer zoom (como se muestra en la image anterior). La image está borrosa y desplazada:

introduzca la descripción de la imagen aquí

También se puede notar que una parte de la línea dibujada hacia el final no se ve afectada y el fenómeno ocurre para líneas trazadas hacia atrás en el time. Creo que la razón de esto es que los attributes de tamaño de image se pierden cuando acerco / alejo, lo que probablemente provoca el desenfoque y el cambio, ¡pero no estoy seguro de eso!

EDITAR : subí un video corto para mostrar lo que está sucediendo. Es un poco entretenido …

EDIT 2- Aquí hay una muestra de una sola vista enfocada en el problema.

Descargué su proyecto y encontré que el problema es el de autorizar. Los siguientes pasos lo resolverán:

Paso 1. Comenta la línea 70:

 drawImage.frame = CGRectMake(0, 0, labOrderImgView.frame.size.width, labOrderImgView.frame.size.height); 

en su método touchesMoved .

Paso 2. Agregue una línea de código después de drawImage se alloc (línea 90) en el método viewDidLoad :

 drawImage.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 

Entonces, el error se solucionó.

Siempre está dibujando en un context de image del tamaño de la vista de su image; esto, por supuesto, se vuelve borroso, ya que no se adapta a una resolución más alta cuando se amplía. Sería más sensato crear una UIBezierPath una vez y simplemente agregar una línea a ella (con addLineToPoint: en el método touchesMoved , luego dibujarlo en un método drawRect personalizado a través de [bezierPath stroke] . También podría agregar un CAShapeLayer como una subvista de la vista de image y establecer su propiedad de path a la propiedad CGPath del bezierPath que creó anteriormente.

¿Ves dibujar curvas bezier con mi dedo en iOS? para un ejemplo.

Implementé un comportamiento como este de la siguiente manera:

  1. Debe recordar todas las coorderadas de su ruta (MODELO).
  2. Dibuja tu ruta en una subvista temporal de imageView.
  3. Cuando el usuario comienza a pellizcar / ampliar su image, no haga nada, es decir, la ruta será escalada por iOS
  4. En el momento en que el usuario haya finalizado el zoom de pellizco, vuelva a dibujar su ruta de manera correcta usando su model.

Si guarda la ruta como image, obtendrá una escala de aspecto negativo como resultado. Además, no dibuje el path directamente a la image : dibuje una vista transparente y divídalos al final de la edición.