ComplexPath

This primitive allows you to draw a path with one or more contours, defined by ComplexPoint points.

Define a complex point

The ComplexPoint class defines a vector with a constraint position, and the position of its bezier curves list.



The position of bezier curves is defined by vertical and horizontal offsets as below:



In mxml :

<uigfx:ComplexPoint 
    horizontalCenter="-48" verticalCenter="-59" 
    nextAnchorOffsetX="-2" nextAnchorOffsetY="4" 
    prevAnchorOffsetX="7" prevAnchorOffsetY="-6" />		

Just like the ConstraintPoint, all values can be expressed in percentage:

<uigfx:ComplexPoint 
    valuesInPercent="true" 
    top="10" horizontalCenter="-25"
    nextAnchorOffsetX="-2" nextAnchorOffsetY="4" 
    prevAnchorOffsetX="7" prevAnchorOffsetY="-6" />

Single contour

Draw a path with a complex contour

Code

<uigfx:ComplexPath top="0" bottom="0" left="0" right="0" >
    <uigfx:points>
        <uigfx:ComplexPoint left="0" prevAnchorOffsetX="4.59" top="36" 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:stroke>
        <s:SolidColorStroke color="#ffffff" weight="1" />
    </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>

Result

Multiples contours

Draw a path with multiples contours.

Each Contour object defines a part of the path. Basically, it's used for process pathfinding, such as union or exclusion.

Each contour is defined on a Contour object, through the "contours" collection property. Like PointsPath, a Contour can be defined as unclosed, using "closedContour" property :

<uigfx:ComplexPath top="0" bottom="0" left="0" right="0" >
    <uigfx:contours>
        <uigfx:Contour closedContour="false">
            <uigfx:points>
            ...

Below a complete sample code :

Code

<uigfx:ComplexPath top="0" bottom="0" left="0" right="0" >
    <uigfx:contours>
        <uigfx:Contour>
            <uigfx:points>
                <uigfx:ComplexPoint left="0" prevAnchorOffsetX="4.59" top="36" 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:Contour>
            <uigfx:points>
                <uigfx:ComplexPoint right="49" bottom="28" nextAnchorOffsetY="-11.87" prevAnchorOffsetY="11.87" />
                <uigfx:ComplexPoint right="28" nextAnchorOffsetX="11.87" prevAnchorOffsetX="-11.87" bottom="49" />
                <uigfx:ComplexPoint right="6" bottom="28" nextAnchorOffsetY="11.87" prevAnchorOffsetY="-11.87" />
                <uigfx:ComplexPoint right="28" nextAnchorOffsetX="-11.87" prevAnchorOffsetX="11.87" bottom="6" />
            </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>

Result

COMPACT DATA PATH REPRESENTATION

Like the Path primitive, you can use a compact representation for the data path. see how to use uigfx path on wiki entry.