por

Criando formas com MXML

É possível criar formas primitivas básicas usando componentes flex já incluídos na biblioteca da SDK, também é possível criar qualquer tipo e forma complexa ou desenho fazendo uso do componente chamado spark.primitives.Path.
Para criar uma elipse ou circulo use o componente:
spark.primitives.Ellipse

Para criar um retângulo ou quadrado use o componente:
spark.primitives.Rect

Para criar qualquer outro tipo de forma ou mesmo uma das citadas acima pode ser usado o componente:
spark.primitives.Path

Ex:
 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   width="600" height="600">
	
	<!-- CIRCULO -->
	<s:Ellipse x="25" y="25" 
			   width="75" height="75">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Ellipse>
	
	<!-- QUADRADO -->
	<s:Rect x="250" y="25"
			width="100" height="100">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Rect>
	
	<!-- ELIPSE -->
	<s:Ellipse x="25" y="150" 
			   width="150" height="75">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Ellipse>
	
	<!-- RETANGULO -->
	<s:Rect x="250" y="150"
			width="250" height="50">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Rect>
	
	<!-- formas complexas -->
	<!-- TRIANGULO -->
	<s:Path x="-25" y="200"
			data="
			M 50 200 
			L 150 50 
			L 250 200 
			L 50 200 ">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Path>
	
	<!-- POLIGONO -->
	<s:Path x="250" y="75"
			data="
			M 50 200 
			L 100 150
			L 200 150
			L 250 200
			L 250 300
			L 200 350
			L 100 350
			L 50 300 
			L 50 200">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Path>
	
	<!-- ABSTRATO -->
	<s:Path x="-50" y="360"
			data="
			M 100 100
			Q 150 50 200 100
			Q 250 150 300 100
			L 600 100
			L 600 200
			L 150 200
			Q 100 200 100 150
			L 100 100">
		<!-- BORDA -->
		<s:stroke>
			<s:SolidColorStroke color="0x000000" weight="2"/>
		</s:stroke>
		<!-- PREENCHIMENTO -->
		<s:fill>
			<s:SolidColor color="0x891156"/>
		</s:fill>
	</s:Path>
</s:Application>

 

Comentários

Carregando comentários

Postar um novo comentário



Processando...