¿Hay alguna manera de hacer esquinas redondeadas en un rectángulo representado en XNA a través de primitivas (tiras de línea)? Quiero hacer que mi interfaz de usuario sea un poco más elegante de lo que ya es, y me gustaría que el código sea flexible, sin demasiadas texturas involucradas.
10
Respuestas:
Puede renderizar su primitivo y crear un sombreador que pueda crear estas esquinas redondeadas.
Aquí hay un sombreador de píxeles simple en pseudocódigo que puede dibujar un cuadrado redondeado:
Resultado de este sombreador de píxeles:
Si usa sombreadores, puede crear una interfaz de usuario realmente elegante, incluso animada.
Para mí, un gran prototipo de sombreadores de píxeles simples es el programa EvalDraw
fuente
Otra forma de hacer esto es usar un 'estiramiento de botón' (también llamado 'estiramiento de caja' o 'nueve parches'). Básicamente, crea una imagen que consta de 9 partes:
Para dibujar ese botón en cualquier tamaño, dibuja cada pieza (de arriba a abajo, de izquierda a derecha):
width - ((1) + (2)).Width
) en la parte superior del rectángulo de destino, con el desplazamiento izquierdo por el ancho de (1).height - ((1) + (2)).Height
) a la izquierda del rectángulo de destino, con el desplazamiento superior por la altura de (1).Si observa el botón, verá que no importa si (2), (5) y (7) se escalan horizontalmente (porque es esencialmente una línea recta); de la misma manera (4), (5) y (6) pueden escalarse verticalmente sin afectar la calidad de la imagen.
fuente
Aquí está el código para el enfoque de "nueve parches":
Se invoca como:
fuente
Texture2D _texture = new Texture2D(GraphicsDevice, 1, 1); _texture.SetData(new Color[] { Color.Blue }); SpriteBatch sb = new SpriteBatch(GraphicsDevice); sb.Begin(); //sb.Draw(_texture, new Rectangle(100, 100, 100, 100), Color.White); sb.DrawRoundedRect(_texture, new Rectangle(100, 100, 100, 100), Color.Pink, 16); sb.End();