Recursos de BauMotionComics

Descripción de los nodos de recursos de BauMotionComics


Recursos de BauMotionComics

En una presentación o un cómic, los recursos son los componentes básicos de nuestro proyecto, es decir, las figuras, imágenes o brochas que vamos a utilizar.

Los recursos en una presentación se pueden utilizar de dos formas, o bien incrustándolos en la presentación o bien incluyéndolos desde un archivo con la etiqueta Include :

<Include FileName ="_ResourcesBrushes.xml" />

Los nombres de archivos (en el atributo FileName ) deben ser relativos al archivo de cómic y normalmente (aunque no es obligatorio) comienzan por un carácter de subrayado. Así la aplicación entiende que no es un archivo de cómic y no lo presenta en la lista.

La diferencia de un archivo de recurso con respecto a un archivo de presentación normal, es que sólo puede contener un nodo Resource con todos los recursos que necesitemos:

<?xml version="1.0" encoding="utf-8" ?>
<Resources>
    ....
</Resources>

Del mismo modo, cuando queremos insertar recursos en un archivo de presentación, utilizamos también la etiqueta Resources :

<Comic Width="1000" Height="600">
	<Title>Un cómic de prueba</Title>
	<Summary>Descripción del cómic</Summary>
	<ThumbFileName>Images\Thumb.png</ThumbFileName>
	
	<Resources>
	  ...
	</Resources>
</Comic>

En las siguientes secciones veremos los diferentes recursos que podemos introducir en esta etiqueta.

Texto

Para introducir un texto en una presentación se utiliza la etiqueta Text :

<Text Key="Text1" Top="100" Left="50" Width="2000" Height="2000" Visible="true" 
		Bold="false" Italic="false" Font="Verdana" Size="16" Color="AAFFFF">
	<Content Language = "sp">
		Este es un texto libre
	</Content>
	<Transform>
		<Rotate Angle="45" OriginX ="0.5" OriginY ="0.5"/>
	</Transform>
</Text>

Imágenes

Introducir una imagen en un archivo de presentación es muy sencillo, simplemente tenemos que utilizar la etiqueta Image :

<Image Key="Sp1" FileName="Images\Spiderman\Spiderman1.png" />

Nota: en todas las etiquetas de tipos de recursos, el atributo Key define la clave con la que posteriormente haremos referencia a ese elemento en nuestra presentación.

Figuras

Las etiquetas Shape definen figuras y formas dentro de nuestra presentación. Las figuras representan únicamente una forma con o sin relleno. El relleno se aplica utilizando brochas como veremos en las siguientes secciones.

Para definir una figura utilizamos la siguiente etiqueta:

<Shape Key="Balloon1" Width="744.09448819" Height="1052.3622047">
	<Transform>
		<Translate Top="0" Left="0"/>
	</Transform>
	<Figure FillRule="NonZero" Color ="FFFFFF">
		<Transform>
			<Matrix Data="1.25 0 0 -1.25 174.30646 169.18614" />
		</Transform>
		<Data>
			m 0 0 c 0 0 -119.501 0.702 -125.109 58.81 -5.608 58.107 41.145 59.667 93.307 45.091 ....
		</Data>
	</Figure>
	<Figure FillRule="NonZero" Brush="FF000000">
		<Transform>
			<Matrix Data="1.25 0 0 -1.25 136.40058 166.98152"/>
		</Transform>
		<Data>
			m 0 0 c -10.075 1.115 -20.11 2.707 -30.021 ....
		</Data>
	</Figure>
	<Figure FillRule="NonZero" Brush="FF000000">
		<Transform>
			<Matrix Data="1.25 0 0 -1.25 276.81746 147.14264"/>
		</Transform>
		<Data>
			m 0 0 c 0 0 0.561 0.763 1.288 2.254 0.719 ....
		</Data>
	</Figure>
	<Figure FillRule="NonZero" Brush="FF000000">
		<Transform>
			<Matrix Data="1.25 0 0 -1.25 38.054584 75.26764"/>
		</Transform>
		<Data>
			M 0 0 C 0 0 -0.339 -0.949 -0.704 -2.678 ...
		</Data>
	</Figure>
</Shape>

Como vemos, una figura se define en la etiqueta Shape y está compuesta por varias figuras identificadas en los subnodos Figure . Los atributos Width y Height indican el ancho y alto de la figura. Debemos tener en cuenta que este ancho y alto son absolutos y que a la hora de presentarlos se convierten utilizando el ancho y alto de la presentación.

Los elementos Figure , por su parte, indican las diferentes formas. Con los atributos Color y Brush se indican los colores de lápiz y relleno (en formato AARRGGBB) y el atributo FillRule el modo en que se aplica el relleno.

Los valores de FillRule son:

  • None: la figura no se rellena.
  • NonZero:
  • EvenOdd:

La etiqueta Data de la figura indica el contorno utilizando el lenguaje de definición de formas de WPF.

Tanto la etiqueta Shape como la etiqueta Figure pueden tener varias etiquetas Transform que añaden transformaciones a los datos.

Podemos incluir cuatro transformaciones diferentes:

  • Translate
  • Scale
  • Rotate
  • Matrix

Grupos de figuras y viñetas

Cuando en nuestra presentación queremos unir figuras con textos e imágenes y brochas, se utiliza la etiqueta Frame :

<Frame Key="Sp5" Top="4" Left="1" Width="520" Height="144" Visible="true">
	<Shape>
		<Figure FillRull="NonZero">
			<Data>
				M 250,40 L200,20 L200,60 Z
			</Data>
		</Figure>
	</Shape>
	<ImageBrush ResourceKey="Bg1" Top="0" Left="0" Width="520" Height="144" />
	<Pen Color="99FF0000" Width="3" />
</Frame>
<Frame Key="Sp7" Top="150" Left ="40" Width="100" Height="100" Visible ="true">
	<Shape ResourceKey="Balloon2" Top="0" Left="0" />
	<Pen Color="0000FF" Width="3" />
	<ImageBrush ResourceKey="Bg1" Top="0" Left="0" Width="520" Height="144" />
</Frame>

Pinceles

<Pen Color="FFFFFF" Width="5" Dots ="2,2"  
	 StartLineCap="Triangle"
	 CapDots="Triangle"
	 EndLineCap="Triangle"
	 JoinMode="Bevel" />

Brochas

Dentro de nuestras presentaciones podemos introducir varios tipos de brochas. Las etiquetas para cada una de ellas es diferente.

Color sólido

Una brocha de color sólido, identifica un color de relleno para una figura:

<SolidBrush Key="BrsRed" Color="FF0000" />

El atributo Color indica el color en formato AARRGGBB.

Gradiente lineales

Un gradiente lineal (etiqueta LinearBrush ) es una brocha cuyo color va pasando de un color a otro:

<LinearBrush Key="BrsLinearBlack" Start="0,0" End="1,1" SpreadMethod="Pad">
	<Stop Color="77000000" Offset="0"/>
	<Stop Color="FF000000" Offset="1"/>
</LinearBrush>

Los atributos Start y End de esta etiqueta, indican el punto de inicio y final del gradiente en coordenadas relativas x e y. 0 indica el principio de la figura que se va a rellenar y 1 indica el final de la figura.

El atributo SpreadMethod indica la forma en que se comporta la brocha cuando se llega al final. Puede tener estos tres valores:

  • Pad: los valores del color al final del vector de gradiante se utilizan para rellenar el espacio restante.
  • Reflect: el gradiante se repite en dirección contraria hasta que se rellena el espacio.
  • Repeat: el gradiente se repite en la dirección original hasta quese rellena el espacio.

Los elementos Stop , por su parte, indican el color en determinado punto. El atributo Offset indica el punto en el que se debe cambiar el color. Los valores de este atributo también son coordenadas relativas.

Gradientes radiales

Un gradiente radial crea una brocha con un gradiente circular. La estructura general de este elemento es:

<RadialBrush Key="BrsRadialRed" Center="0.54326,0.45465" RadiusX="0.602049" RadiusY="1.02049" 
			Origin="0.4326,0.45465" SpreadMethod = "Pad">
	<Stop Color="FFFFC154" Offset="0"/>
	<Stop Color="FFE41E18" Offset="0.718518495559692"/>
	<Stop Color="FFA50000" Offset="1"/>
</RadialBrush>

Donde, aparte del atributos SpreadMethod y los elementos Stop definidos anteriormente, se puede definir:

  • El centro del gradiente utilizando el atributo Center .
  • El radio X e Y con los atributos RadiusX y RadiusY .
  • El origen del gradiente utilizando el atributo Origin .

Imagen

También se puede utilizar una imagen como brocha o fondo de otras figuras con la siguiente estructura:

<ImageBrush ResourceKey="Sp1"
			ViewBox = "0, 0.5, 1, 1"
			ViewPort = "0, 0.5, 1, 1" TileMode = "FlipX" 
			StretchMode = "Fill" />

Donde ResourceKey es la clave de la imagen (el atributo Key de una imagen definida como recurso), ViewBox es la posición donde se aplica el relleno en coordenadas relativas.

ViewPort son las dimensiones de la imagen que se van a utilizar para rellenar la brocha. Es decir, son coordenadas sobre la propia imagen. Así: 0.5, 0.5, 1, 1 indica que se va a utilizar la imagen desde el punto medio hasta el final. Este elemento es opcional, si no se indica, se utilizará toda la imagen (o lo que es lo mismo el ViewPort 0, 0, 1, 1).

TileMode es el modo en que se va a repetir la imagen con estos valores:

  • FlipX: la imagen se repite hasta rellenar la figura volteándola horizontalmente siempre que es necesario.
  • FlipY: la imagen se repite hasta rellenar la figura volteándola verticalmente siempre que es necesario.
  • FlipXY: la imagen se repite hasta rellenar la figura volteándola horizontal y verticalmente siempre que es necesario.
  • None: la imagen no se repite, el espacio que queda de la brocha cuando se coloca la imagen simplemente no se rellena.
  • Tile: la imagen se repite hasta rellenar el espacio donde se aplica la brocha.

StretchMode es el modo en que se ajusta la imagen, con los siguientes valores:

  • Fill: la imagen se ajusta para rellenar la brocha.
  • Uniform: la imagen se ajusta de forma uniforme sin provocar distorsiones de aspecto.
  • UniformToFill: la imagen se ajusta de forma uniforme hasta rellenar la brocha aunque se produzcan distorsiones.

Páginas relacionadas