My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
CompactRepresentationOfComplexPath  
How to use the compact representation of a ComplexPath primitive
Updated Sep 20, 2010 by fabien.b...@gmail.com

Like the Path primitive, you can use the compact representation for your data path as following :

C D R 96 T 18 P 4.59 5.36 D R 68 T 9 D R 59 T 37 D R 87 T 46 P 13.81 S -7.6
Compact representation of path

Syntax for the compact representation :

C : Define a Contour. A path can have one or more C command. The compact representation need to start with this code.



C command can be followed optionnaly by :

O : define if the contour is open. If you don't insert an "0", the Contour object is automatically closed.



Its followed by one or more :

D : define the beginning of a point's declaration.

Its followed by :

  • horizontal constraints :
    • X : position on x axe
    OR
    • L : follow by a number, define the position of point at left
    • H : follow by a number, define the position of point at horizontalCenter
    • R : follow by a number, define the position of point at right
  • vertical constraints :
    • Y : position on y axe
    OR
    • T : follow by a number, define the position of point at top
    • V : follow by a number, define the position of point at verticalCenter
    • B : follow by a number, define the position of point at bottom
  • P : predecessor bezier with one or two numbers for x and y offset position
  • S : successor bezier with one or two numbers for x and y offset position

Sample

This primitive defines with a compact representation...

<uigfx:ComplexPath 	
	data="C D L 0 T 36.5 P 4.59 5.36 D L 0 B 0 D H -35 B 0 D H -23 B 18 D H 3 B 2 D H 2 B 0 D R 0 B 0 D R 0 T 0 D L 34 T 0 S 6.07 4.56 D L 44 T 20 P 0 -8.18 S 0 13.81 D L 19 T 45 P 13.81 S -7.6 C D R 96 T 18 D R 68 T 9 D R 59 T 37 D R 87 T 46 " 
	width="200" height="200">
		
	<uigfx:stroke>
		<s:SolidColorStroke color="#ffffff" weight="2" />
	</uigfx:stroke>
	
	<uigfx:fill>
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="#333333" ratio="0" alpha="1"/>
			<s:GradientEntry color="#212121" ratio="1" alpha="1"/>
		</s:LinearGradient>
	</uigfx:fill>
	
	<uigfx:filters>
		<s:GlowFilter color="#000000" blurX="12" blurY="12" alpha="0.65"/>
	</uigfx:filters>
</uigfx:ComplexPath>

...is exactely the same that :

<uigfx:ComplexPath id="cmpPath" width="200" height="200">
	<uigfx:contours>
		<uigfx:Contour>
			<uigfx:points>
				<uigfx:ComplexPoint left="0" prevAnchorOffsetX="4.59" top="36.5" prevAnchorOffsetY="5.36" />
				<uigfx:ComplexPoint left="0" bottom="0" />
				<uigfx:ComplexPoint horizontalCenter="-35" bottom="0" />
				<uigfx:ComplexPoint horizontalCenter="-23" bottom="18" />
				<uigfx:ComplexPoint horizontalCenter="3" bottom="2" />
				<uigfx:ComplexPoint horizontalCenter="2" bottom="0" />
				<uigfx:ComplexPoint right="0" bottom="0" />
				<uigfx:ComplexPoint right="0" top="0" />
				<uigfx:ComplexPoint left="34" nextAnchorOffsetX="6.07" top="0" nextAnchorOffsetY="4.56" />
				<uigfx:ComplexPoint left="44" top="20" nextAnchorOffsetY="13.81" prevAnchorOffsetY="-8.18" />
				<uigfx:ComplexPoint left="19" nextAnchorOffsetX="-7.6" prevAnchorOffsetX="13.81" top="45" />
			</uigfx:points>
		</uigfx:Contour>
		<uigfx:Contour>
			<uigfx:points>
				<uigfx:ComplexPoint right="96" top="18" />
				<uigfx:ComplexPoint right="68" top="9" />
				<uigfx:ComplexPoint right="59" top="37" />
				<uigfx:ComplexPoint right="87" top="46" />
			</uigfx:points>
		</uigfx:Contour>
	</uigfx:contours>
	
	<uigfx:stroke>
		<s:SolidColorStroke color="#ffffff" weight="2" />
	</uigfx:stroke>
	
	<uigfx:fill>
		<s:LinearGradient rotation="90">
			<s:GradientEntry color="#333333" ratio="0" alpha="1"/>
			<s:GradientEntry color="#212121" ratio="1" alpha="1"/>
		</s:LinearGradient>
	</uigfx:fill>
	
	<uigfx:filters>
		<s:GlowFilter color="#000000" blurX="12" blurY="12" alpha="0.65"/>
	</uigfx:filters>
</uigfx:ComplexPath>

You can use the Fireworks extension to obtain the compact representation of path of your graphic.


Sign in to add a comment
Powered by Google Project Hosting