PointsPath

This primitive allows you to draw a path, based on a list of points(ConstraintPoint).

Additionally, you can set a roundness to your primitive using the "radius" property.

A PointsPath can be defined as "not closed" : in this case you can use the "closedPath" property and set it to false :

<uigfx:PointsPath radius="60" closedPath="false">
   ...
</uigfx:PointsPath>

Using constraint point

The ConstraintPoint class defines a point with constraints values (left, horizontalCenter, right; and top, verticalCenter, bottom) :

<uigfx:ConstraintPoint top="0" horizontalCenter="0" />

Every single value can be expressed as a percentage, setting "valuesInPercent" property to "true" (by default, all values are expressed in pixel) :

<uigfx:ConstraintPoint valuesInPercent="true" top="10" horizontalCenter="-25" />

Sample

Draw a five branch star, with a rounded path ("radius" property), and constraints points vector.

Code

<uigfx:PointsPath
    radius="60" width="100%" height="100%"
    horizontalCenter="0" verticalCenter="0">
		
    <uigfx:points>
	<uigfx:ConstraintPoint top="0" horizontalCenter="0" />
	<uigfx:ConstraintPoint horizontalCenter="25" verticalCenter="-25"/>
	<uigfx:ConstraintPoint right="0" verticalCenter="-25" />
	<uigfx:ConstraintPoint horizontalCenter="40" verticalCenter="25" />
	<uigfx:ConstraintPoint right="40" bottom="0" />
	<uigfx:ConstraintPoint horizontalCenter="0" verticalCenter="40" />
	<uigfx:ConstraintPoint left="40" bottom="0" />
        <uigfx:ConstraintPoint horizontalCenter="-40" verticalCenter="25" />
        <uigfx:ConstraintPoint left="0" verticalCenter="-25" />
        <uigfx:ConstraintPoint horizontalCenter="-25" verticalCenter="-25" />
    </uigfx:points>
		
    <uigfx:fill>
        <s:SolidColor color="#353535" />
    </uigfx:fill>
		
    <uigfx:filters>
        <s:DropShadowFilter color="#000000" inner="true" distance="1"
            blurX="4" blurY="4"
            quality="3" alpha="0.8" />
    </uigfx:filters>
	
</uigfx:PointsPath>

Result