Dibujar formas y trazados

Microsoft Expression Blend ofrece funciones de dibujo vectorial estándar que permiten dibujar formas, trazados y máscaras como en cualquier otro programa de gráficos vectoriales. Para crear dibujos e ilustraciones más avanzados, considere la posibilidad de usar otro programa de gráficos vectoriales, como Microsoft Expression Design. Expression Design incluso permite a los usuarios exportar dibujos como XAML para su uso en Expression Blend.

Para obtener más información, vea Importar XAML exportado desde Expression Design.

¿Qué son los gráficos vectoriales?

Los gráficos vectoriales se definen geométricamente mediante puntos, líneas, curvas y superficies, en lugar de usar píxeles como en un mapa de bits. A medida que aumenta la resolución de pantalla de los monitores de los equipos, surge la necesidad de abandonar los mapas de bits que muestran píxeles de gran tamaño al verlos con una resolución alta. El cambio de tamaño de los mapas de bits puede resultar complicado y suele producir gráficos de baja calidad. Los gráficos vectoriales permanecen suaves cuando se visualizan con una resolución alta e incluso cuando se aumenta su tamaño. Por este motivo, los gráficos vectoriales también resultan más fáciles de personalizar para ajustarlos al contenido, puesto que no es necesario crear varias imágenes con distintos tamaños fijos (por ejemplo, los archivos de icono que aparecen en la interfaz de usuario [UI] con distintos tamaños). Otras ventajas de los gráficos vectoriales son las siguientes:

• Escalado del contenido real   Los gráficos vectoriales integrados en un diseño flexible pueden cambiarse de tamaño correctamente en función del contenido. Por ejemplo, cuando se agrega texto a un botón, el tamaño del botón cambiará para adaptarse al texto sin comprometer la fidelidad del gráfico.

• Independencia de la resolución   La resolución de las pantallas ha ido aumentando poco a poco y es probable que el proceso continúe. Sin la capacidad de escalar la interfaz de usuario de una aplicación, dicha interfaz se muestra cada vez más pequeña a medida que aumenta la resolución y, normalmente, resulta inutilizable cuando el contenido es tan pequeño que se convierte en ilegible. Si aplica una transformación de giro o un escalado con estas API, sólo se ven afectados los dibujos. No se produce ningún cambio en los tamaños y las posiciones de los controles de la ventana. Puede escalar los dibujos, pero no se puede escalar fácilmente la forma en que se llenará una ventana con controles. Puesto que Windows Presentation Foundation (WPF) compone todos los controles de la ventana como un único dibujo, en lugar de segregar cada control en su propia área, resulta sencillo aplicar transformaciones de giro o de escalado a toda la interfaz de usuario. Por lo tanto, puesto que se puede agrandar o reducir a escala cualquier UI de WPF, las aplicaciones de WPF son realmente independientes de la resolución. Las imágenes permanecen nítidas y claras, en lugar de aparecer desenfocadas como las imágenes que se obtendrían al escalar mapas de bits.

[!NOTA]

Cuando se configuran propiedades relacionadas con el tamaño en aplicaciones de WPF (como las creadas con Expression Blend), por píxeles se entiende píxeles independientes del dispositivo o unidades independientes del dispositivo que son equivalentes al tamaño de un píxel en un monitor configurado con una resolución de pantalla de 96 PPP. Cada unidad mide aproximadamente 1/96 de pulgada con independencia del tamaño del monitor o de la resolución de pantalla.

En Expression Blend, un objeto vectorial puede ser tan simple como una línea o una forma, o tan complejo como un trazado o un control. Puede modificar objetos de muchas formas distintas mediante el uso de los manipuladores de objeto para cambiar su tamaño, moverlos, girarlos, voltearlos o sesgarlos, o mediante el panel Propiedades, en el que puede especificar valores precisos de tamaño, posición y giro. En realidad, cada objeto que se dibuja en la mesa de trabajo está en formato vectorial, excepto aquellos elementos que se agreguen al proyecto y que no estuvieran originalmente en formato vectorial, como las imágenes y las texturas 3D. Entre los objetos vectoriales de Expression Blend, figuran:

• Objetos de dibujo como elipses y rectángulos

• Objetos de trazado como líneas y curvas

• Texto.

• Objetos 3D.

• Controles.

Herramientas de dibujo

El panel Herramientas contiene herramientas vectoriales comunes para la creación de formas y trazados, y para la manipulación de objetos.

Para obtener ejemplos del uso de estas herramientas, vea los siguientes temas:

• Dibujar un trazado o una forma en el proyecto

• Dibujar una línea recta

• Dibujar una curva

• Dibujar un trazado de forma libre

• Cambiar la forma de una curva

• Volver a definir puntos de control de un punto en un trazado.

Herramienta	Nombre	Uso
	Rectángulo	Dibuje rectángulos y cuadrados que también podrá modificar para que tengan vértices redondeados.
	Elipse	Dibujo de elipses y círculos.
	Línea	Dibujo de líneas rectas entre dos puntos.
	Pluma	Dibujo y modificación de trazados en los que se puede definir cada nodo. La herramienta Pluma permite agregar, quitar y modificar nodos del trazado.
	Lápiz	Dibujo de trazados a mano alzada.
	Selección	Selección de formas, trazados y objetos de la mesa de trabajo que desea modificar. Para obtener más información acerca de cómo usar la herramienta Selección, vea Seleccionar o cancelar la selección de objetos.
	Selección directa	Selección de nodos individuales de un trazado después de haberlos dibujado También puede usar la herramienta Selección directa para seleccionar directamente objetos secundarios anidados en un objeto principal de la mesa de trabajo, como en un panel de diseño. Para obtener más información acerca de cómo usar la herramienta Selección directa, vea Seleccionar o cancelar la selección de objetos.

Formas y trazados

Las formas, como los rectángulos y las elipses, son objetos vectoriales. Puede dibujar formas con la herramienta Rectángulo o con la herramienta Elipse.

Los trazados, que también son objetos vectoriales, son seguramente los objetos vectoriales más flexibles de Expression Blend. Los trazados se componen de varias líneas y curvas conectadas. Una vez dibujados los trazados en la mesa de trabajo, puede cambiar su forma, combinarlos y modificarlos para crear cualquier forma vectorial. Puede dibujar polígonos, que son formas cerradas compuestas de líneas rectas conectadas, así como polilíneas, que son trazados no cerrados compuestos de líneas rectas conectadas. Puede dibujar trazados con la herramienta Pluma, la herramienta Lápiz  y la herramienta Línea. Después puede usar las herramientas Selección y Selección directa para modificar los trazados.

Para obtener más información acerca de cómo modificar trazados, vea los temas siguientes.

• Eliminar parte de un trazado

• Agregar o quitar un punto de un trazado

• Cambiar la forma de una curva

• Volver a definir puntos de control de un punto en un trazado

• Teclas modificadoras de la herramienta Selección directa

• Teclas modificadoras de la herramienta Pluma

Convertir formas en trazados

Los objetos de forma no se pueden editar del mismo modo que los objetos de trazado, a menos que se convierta el objeto de forma en un objeto de trazado con el comando Convertir en trazado (en el menú Objeto, haga clic en Trazado y elija Convertir en trazado).

Para obtener un ejemplo, vea Convertir una forma en un trazado.

[!NOTA]

No será posible cambiar las propiedades específicas de una forma (como el radio de redondeo de un rectángulo) después de convertirla en un trazado. Asimismo, si la forma tenía un estilo aplicado antes de la conversión, se recuperarán los valores predeterminados de las propiedades del trazado convertido (pincel sin relleno y trazo negro).

Cambiar el radio de redondeo

Puede cambiar el radio de redondeo de un rectángulo si selecciona el rectángulo y arrastra los manipuladores del radio de redondeo del vértice superior izquierdo. El manipulador del radio de redondeo se muestra cuando se mueve el puntero sobre cualquiera de los extremos de las líneas discontinuas que sobresalen del vértice superior izquierdo del rectángulo.

Mantenga presionada la tecla MAYÚS y arrastre cualquiera de los manipuladores del radio de redondeo para cambiar los radios de redondeo X e Y de manera individual.

Para obtener un ejemplo, vea Redondear los vértices de un rectángulo.

Combinar trazados

La combinación de trazados (o formas) puede proporcionar los siguientes resultados:

	Dos formas antes de su combinación		Formar intersección
	Unir		Excluir superposición
	Dividir		Restar

Puede combinar dos o más objetos (trazados o formas) en un objeto de trazado. El objeto de trazado resultante reemplaza el último objeto seleccionado antes de la combinación y adopta sus propiedades. A menudo, el resultado es un trazado compuesto.

Para obtener un ejemplo, vea Combinar formas o trazados.

Para obtener más información acerca de cómo modificar trazados, vea Teclas modificadoras de la herramienta Selección directa y Teclas modificadoras de la herramienta Pluma.

[!NOTA]

Tras combinar esa forma con otro objeto, no será posible cambiar propiedades específicas de una forma (como el radio de redondeo de un rectángulo). Además, si se ha aplicado un estilo al último objeto seleccionado antes de la conversión, las propiedades del trazado combinado se restablecerán a las predeterminadas de un trazado (sin pincel de relleno y trazo negro).

Trazados compuestos

Cuando se crea un trazado compuesto, las partes en intersección de los trazados se restan del resultado final y el trazado resultante adopta las propiedades visuales del trazado situado al fondo.

Dos trazados convertidos en un trazado compuesto

Se deben convertir las formas en trazados para poder incluirlas en un trazado compuesto (seleccione Convertir en trazado en Trazado del menú Objeto). Se pueden combinar dos o más trazados para formar un trazado compuesto. El trazado resultante reemplaza el último (en orden Z) seleccionado antes de crear uno compuesto y adopta sus propiedades. Puede separar un trazado compuesto en cualquier momento después de crearlo, pero no se restaurarán las propiedades originales.

Para obtener un ejemplo, vea Crear o separar un trazado compuesto.

Trazados de recorte

Un trazado de recorte es un trazado o forma que se aplica a otro objeto, ocultando así las partes del objeto con máscara que sobresalen del trazado de recorte.

Objeto de imagen con un trazado de recorte aplicado

En Expression Blend, se pueden modificar los trazados de recorte en la mesa de trabajo después de crearlos y se pueden separar sin perder el objeto de trazado original. Para obtener un ejemplo, vea Aplicar, modificar o quitar un trazado de recorte.

También se pueden animar los vértices individuales de los trazados de recorte (por ejemplo, para exponer gradualmente el objeto con máscara). Para obtener un ejemplo, vea Animar los puntos de un trazado o un trazado de recorte.

Máscaras de opacidad

Una máscara de opacidad puede ser un trazado o una forma que se aplica a otro objeto. Las partes transparentes del trazado representan áreas en las que está oculto el objeto con máscara, mientras que las partes opacas de la máscara indican dónde se permite que se transparente el objeto con máscara. Puede definirse una máscara de opacidad para cualquier objeto en la sección Apariencia del panel Propiedades.

Una máscara de opacidad puede ser un simple pincel de degradado que muestre u oculte partes de un objeto en función de la transparencia. En el ejemplo siguiente, la imagen de la izquierda no tiene aplicada ninguna máscara de opacidad y la imagen de la derecha se puede crear de una de las dos maneras siguientes:

• Se puede establecer la propiedad OpacityMask (máscara de opacidad) del objeto de imagen en un pincel de degradado radial con un valor de 0 para el canal alfa del delimitador de degradado derecho.

• Se puede crear un objeto de rectángulo delante del objeto de imagen y establecer la propiedad OpacityMask (máscara de opacidad) del rectángulo en un pincel de degradado radial con un valor de 0 para el canal alfa del delimitador de degradado izquierdo.

Imagen sin máscara (izquierda) e imagen con máscara de opacidad aplicada (derecha)

Para obtener un ejemplo, vea Crear una máscara de opacidad.