¿Por qué una imagen PNG a veces se vuelve borrosa en función de su posición en una vista?

Question

Me he dado cuenta de que al colocar imágenes PNG en una vista utilizando IB y/o animando esas imágenes en varias posiciones alrededor de una vista, la imagen a veces puede obtener un leve desenfoque.

En la mayoría de los casos, puedo remediar la falta de definición agregando .5 de un píxel a la posición de las imágenes.

[lbLiteButton.layer setPosition:CGPointMake(140.5,159.5)]; 

A veces tengo que ajustar tanto x como y como arriba. A veces solo tengo que ajustar x o y.

Recuerdo haber leído en alguna parte que esto tiene que ver con el tamaño de la imagen y cómo funciona la animación central y algo que ver con medio píxel ... pero no puedo encontrar el artículo en ninguna parte?

El problema con la solución de ".5 píxeles" es que es diferente para cada imagen PNG según el tamaño, por lo que no puede reutilizar la animación personalizada porque debe personalizarla para cada imagen diferente.

1. ¿Hay alguna manera de garantizar que no importa dónde coloque o anime mi imagen, no obtendré ninguna posición borrosa?
2. ¿Alguien tiene alguna información sobre esto?

¡Gracias!

Answer 1

La propiedad position de la capa de una vista se basa en su propiedad anchorPoint. Por defecto, eso es (0.5, 0.5), lo que significa que el punto de anclaje de la capa está en el centro. Si su vista (y su capa) tienen un número impar de píxeles de ancho o alto, establecer un valor integral para la posición hará que el origen de la vista sea no integral, lo que provocará la visión borrosa que ve.

Para solucionar esto, podría encontrar una versión integral de su posición tomando la posición central deseada de la vista, restando la mitad del ancho de la vista, redondeando ese valor, luego agregando la mitad del ancho de la vista y repitiendo para la altura También puede establecer anchorPoint para la capa de su vista en (0,0) y colocar la vista en función de su origen.

Existe la posibilidad de que esto también se deba a una desalineación de una supervista. Para diagnosticar esto, puede usar el instrumento Core Animation en Instruments y seleccionar la opción Color Misaligned Images. Debería colorear cualquier vista o capa que no esté alineada con píxeles en su aplicación.

Answer 2

Tuve una experiencia similar con el texto borroso en una etiqueta, y fue causada por la supervista de mis etiquetas con un desplazamiento de subpixel. Así que, aunque la ubicación dentro de esa vista era integral, cuando se ajustaba a las coordenadas de sus padres tenía un offset de medio píxel, lo que causaba la falta de definición.

Si está recibiendo esto solo algunas veces, sin embargo, ese podría no ser el caso. ¿Se está moviendo su supervista o está posicionada de forma extraña? Yo diría que lo mejor que puede hacer es descubrir las circunstancias precisas bajo las cuales esto está sucediendo.

Answer 3

IB tiene un error donde a veces (no muy a menudo) simplemente mover elementos los hará difusos: lo ve más a menudo con UILabels y UIImageViews (aunque eso es probablemente lo más aparente). Estoy seguro de que tiene que ver de alguna manera con los puntos mencionados anteriormente, pero la solución suele ser establecer las coordenadas de ubicación (x, y) para el elemento en 0,0, y luego volver a los valores originales. Esto generalmente resuelve el problema (de nuevo, esto está en IB).