plus - iphone caracteristicas

Core Graphics no está dibujando una línea con el ancho correcto

Question

Intento combinar un borde en una UIView con una línea dibujada en drawRect. Yo uso para ambos el mismo ancho. Pero el problema es que a veces el ancho resultante de las líneas dibujadas es el mismo para ambos y, a veces, no, ¡esto incluso cambia con la orientación del dispositivo! Pero incluso sin cambiar la orientación del dispositivo, en general todavía no tiene el mismo ancho.

El borde está dibujado con:

view.layer.borderColor = [UIColor blackColor].CGColor;
view.layer.borderWidth = 1.0f;

Encima de esa vista hay otra vista, que es una subclase de UIView. Ambas vistas tienen el mismo ancho y esta segunda vista cubre la parte superior de la vista superior. La vista de cobertura utiliza el siguiente código en drawRect para dibujar una línea a la izquierda, que se supone que se alinea perfectamente con el borde de la vista superior debajo de él:

CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat x = self.bounds.origin.x;
CGFloat y = self.bounds.origin.y;
CGFloat width = self.bounds.size.width;
CGFloat height = self.bounds.size.height;

CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextSetLineWidth(context, 1.0f);

// Left line
CGContextMoveToPoint(context, x, y);
CGContextAddLineToPoint(context, x, height);
CGContextStrokePath(context);

// Right line
CGContextMoveToPoint(context, width - 1.0f, y);
CGContextAddLineToPoint(context, width - 1.0f, height);
CGContextStrokePath(context);

¿Alguna idea de cómo se puede lograr esto? En este momento, aunque el ancho siempre es 1.0f, es una coincidencia que ambas líneas se dibujen con el mismo ancho visible.

El objetivo es terminar con algo que se parece a una vista con las esquinas redondeadas en la parte inferior, pero los bordes habituales en la parte superior. Es por eso que estoy haciendo esto. La primera vista tiene las esquinas redondeadas y la segunda vista arriba coincide con el ancho pero cubre la parte superior, por lo que las esquinas redondeadas en la parte superior no son visibles.

Captura de pantalla en retrato:

Captura de pantalla en el paisaje:

La vista amarilla está encima de la vista blanca. Las líneas negras de la vista blanca se dibujan como resultado de view.layer.borderWidth = 1.0f. Las líneas negras a la izquierda y a la derecha de la vista amarilla se dibujan en drawRect con el código anterior. Los cambios de orientación desencadenan un redibujado pero el código de dibujo en sí permanece igual. Ambas capturas de pantalla son de un iPhone con pantalla retina (iPhone 4S).

Por lo que puedo decir, todos los valores son "enteros":

x: 0.000000, y: 0.000000
width: 264.000000, height: 10.000000
frame.origin.x: 33.000000, frame.origin.y: 38.000000

Answer 1

Supongo que la línea que estás dibujando no está alineada con los píxeles. Si estoy equivocado, entonces ignora mi tangente aquí. Pero es información útil, no obstante.

Voy a tomar prestadas algunas capturas de pantalla de este video de WWDC 2011:

"1-29 Sesión 129 - Dibujo práctico para desarrolladores de iOS"

Te sugiero que mires todo el asunto. La sección relevante comienza alrededor de la marca 20:50.

Básicamente, imagine que desea dibujar una línea de 1pt desde (1,2) a (4,2)

Los gráficos centrales intentarán centrarlo en el valor y, que es 2.0. Esto significa que intentará dibujar la línea con su borde superior en y = 1.5 y el borde inferior en y = 2.5:

En una pantalla de retina, esto funcionará bien, porque y = 1.5 ey = 2.5 están alineados en píxeles:

Sin embargo, en una pantalla que no sea retina, el sistema de gráficos se verá obligado a llenar 2 píxeles verticales a media intensidad para obtener la coincidencia más cercana posible:

Tenga en cuenta que este efecto aún se verá en las pantallas retina cuando se trata de valores de puntos fraccionarios más pequeños. Por lo tanto, este problema aún se puede ver en las pantallas Retina según el marco de su vista.

Para solucionar este problema, cada vez que tiene un ancho de línea impar, necesita compensar el valor del punto donde lo dibuja por 0.5. Debe compensarlo arriba / abajo / izquierda / derecha dependiendo de la situación.

Espero que esto ayude. Sin una captura de pantalla es difícil decir cuál es tu problema.