Processes

Effects can be applied to a Canvas figure using the processes array property.

var processes = figure.processes();
processes.add( process );

Some processes are restricted to specific kinds of figures.

Text processes

Can be applied only to Text.

Changes the size of the first and last letter.

`Cx.Capital`	Type	Def	Definition
`scaleX`	Number	`1`	X axis scale to be applied to the letter
`scaleY`	Number	`1`	Y axis scale to be applied to the letter
`hAlignment`	Enum	`Center`	Options: `Left`, `Center`, `Right`
`vAlignment`	Enum	`Baseline`	Options: `Baseline`, `Top`, `Middle`, `Bottom`
`pattern`	Enum	`'First Last'`	Options: `'First'`, `'Last'`, `'First Last'`

var process = Cx.Capital({ scaleX: 1.5, scaleY: 1.5, vAlignment: 'Middle', pattern: 'First' });

<Capital ScaleX="2" ScaleY="2" HAlignment="Center" VAlignment="Baseline" Pattern="First Last"/>

Similar to Capital but offers better control of the resizing.

`Cx.BookEnd`	Type	Def	Definition
`headSX`	Number	`1`	X axis scale to be applied to the first letter
`headSY`	Number	`1`	Y axis scale to be applied to the first letter
`tailSX`	Number	`1`	X axis scale to be applied to the last letter
`tailSY`	Number	`1`	Y axis scale to be applied to the last letter
`hAlignment`	Enum	`Center`	Options: `Left`, `Center`, `Right`
`vAlignment`	Enum	`Baseline`	Options: `Baseline`, `Top`, `Middle`, `Bottom`

var process = Cx.BookEnd({ headSX: 1.2, headSY: 1.5, tailSX: 1.2, tailSY: 1.5
                         , hAlignment: 'Center', vAlignment: 'Bottom' });

<BookEnd HeadSX="1.2" HeadSY="1.5" TailSX="1.2" TailSY="1.5"
         HAlignment="Center" VAlignment="Baseline"/>

Fits the text to an arc.

`Cx.ClassicArc`	Type	Def	Definition
`width`	Number	`500`	Width of the arc
`height`	Number	`100`	Height of the arc
`from`	Angle	`160`	Angle of the arc where the text starts
`to`	Angle	`20`	Angle of the arc where the text finishes
`dontRotate`	Boolean	false	Whether to rotate or not the each letter

var process = Cx.ClassicArc({ width: 1000, height: 400, from: 135, to: 45, dontRotate: false });

<ClassicArc Width="1000" Height="400" From="135" To="45" DontRotate="false"/>

Fits the text to an ellipse.

`Cx.FitEllipse`	Type	Def	Definition
`height`	Number	100	Height of the ellipse
`width`	Number	500	Widht of the ellipse
`rotation`	Number	0	Angle to rotate the text with respect to its center after fitting
`placement`	Number	90	Angle to place the center of the text in the ellipse
`mirror`	Boolean	False	Whether to use a mirror effect on the text or not
`inside`	Boolean	True	Whether to fit the text inside the ellipse or not
`dontRotate`	Boolean	False	Whether to rotate or not the text
`fit`	Enum	None	Options: `None`, `Scaled`, `Contained`, `Stretched`, `Expanded`

var process = Cx.FitEllipse({ height: 100, width: 500, rotation: 0, placement: 90
                            , mirror: false, inside: true, dontRotate: false, fit: 'None'});

<FitEllipse Height="100" Width="500" Rotation="0" Placement="90"
            Mirror="False" Inside="True" DontRotate="False" Fit="None"/>

Fits the text in a defined path.

`FitOnPath`	Type	Def	Definition
`vPos`	Enum	`Over`	Options: `Above`, `Over`, `Below`
`hPos`	Enum	`Fixed_CenterTop`	Options: `Fixed_Left`, `Fixed_CenterTop`, `Fixed_CenterBottom`, `Fixed_Right`, `Stretched`, `Scaled`, `Expanded`
`offset`	Number	0	Offset of the text and the beginning of the path
`distanceFromPath`	Number	0	Distance between the path and the text
`placeOnOtherSide`	Boolean	False	Whether to place the text on the other side of the path or not
`fwd`	Boolean	True	Whether place the text forwards or backwards in the path
`dontRotate`	Boolean	False	Whether to rotate or not the text
`overhang`	Boolean	False	Whether to use overhang or not
`//path`	Path	-	The path the text will be fitting to

var process = Cx.FitOnPath({ path: Cx.Curve(points,false)
                           , vPos: 'Over', hPos: 'Fixed_CenterTop', offset: 0
                           , distanceFromPath: 0, placeOnOtherSide: false 
                           , fwd: true, dontRotate: false, overhang: false });

<FitOnPath VPos="Over" HPos="Fixed_CenterTop" Offset="0" DistanceFromPath="0" 
           PlaceOnOtherSide="False" Fwd="True" DontRotate="False" Overhang="False">
  <Path Type="Bezier3" IsClosed="False" Points="..."></Path>
</FitOnPath>

Deform processes

This processes deform the figure they’re applied to.

Fits the figure to an arch.

`VerticalArch`	Type	Def	Definition
`height`	Number	100	Height of the arch
`width`	Number	500	Width of the arc
`from`	Number	160	Angle of the arc where the figure starts
`to`	Number	20	Angle of the arc where the figure starts

var process = Cx.VerticalArch({ height: 100, width: 500, from: 160, to: 20 });

<VerticalArch Height="100" Width="500" From="160" To="20"/>

Makes the figure to be shown as if it was beeing looked from a certain perspective.

`Cx.Perspective`	Type	Def	Definition
`hPoint`	Point	(1000, 0)	Horizontal vanishing point
`vPoint`	Point	(0, 300)	Vertical vanishing point

var process = Cx.Perspective({ hPoint: Px(1000, 0), vPoint: Px(0, 300) });

<Perspective HPoint="1000, 0"  VPoint="0, 300"/>

Fits the figure to the form of an envelope

`FitEnvelope`	Type	Def	Definition
`envelope`	Cx.Envelope		Envelope to fit the figure
`mode`	Enum	Mixed	Options: Mixed, Freeform, Uniform, Boxed
`vPos`	Enum	Stretched	Options: Stretched, Top, Center, Bottom, Expanded
`hPos`	Enum	Stretched	Options: Stretched, Left, Center, Right, Expanded
`highResolution`	Boolean	False	Whether to use or not high resolution
`keepLines`	Boolean	False	Whether to keep the lines or not
`addBearingX`	Boolean	False	Whether to add or not bearing x

var process = Cx.FitEnvelope({ envelope: Cx.Envelope(curves)
                             , mode: 'Mixed'
                             , vPos: 'Stretched', hPos: 'Stretched'
                             , highResolution: false, keepLines: false
                             , addBearingX: false });

<FitEnvelope Mode="Mixed" VPos="Stretched", 
             HPos="Stretched" HighResolution="False" KeepLines="False"    
             AddBearingX="False" VPoint="0 300">           
  <Envelope>
    <Curve Type="Bezier3" IsClosed="False" Points="..."></Curve>
    <Curve Type="Bezier3" IsClosed="False" Points="..."></Curve>
    <Curve Type="Bezier3" IsClosed="False" Points="..."></Curve>
    <Curve Type="Bezier3" IsClosed="False" Points="..."></Curve>
  </Envelope>
</FitEnvelope>

Decorate processes

This processes decorate the figure (i.e. add elements like shadows or contours).

Adds a border to the figure.

`Cx.Border`	Type	Def	Definition
`dX`	Number	20	The size of the border for the x axis
`dY`	Number	30	The size of the border for the y axis
`gap`	Number	10	The gap between the parts of the figure if separate
`separate`	Boolean	False	Whether to separate the figure or not

var process = Cx.Border({ dX: 20, dY: 30, gap: 10, separate: false });

<Border DX="20" DY="30" Gap="10" Separate="False"/>

Add a contour to the figure.

`Cx.Contour`	Type	Def	Definition
`pen`	Cx.Pen	-	The pen to use
`brush`	Cx.Brush	-	The brush to use
`offset`	Number	`5`	The offset of each contour step
`steps`	Number	`1`	Number of steps of the contour
`inside`	Boolean	`false`	Contour towards the inside
`outside`	Boolean	`true`	Contour towards the outside
`includeHoles`	Boolean	`false`	Include holes of the input figure
`combine`	Boolean	`false`	Combine all parts of the contour in a single shape
`chamfer_D`	Number	`0.1`	Soften the edges of the contour
`chamfer_L`	Number	`0.1`	Soften the edges of the contour

var process = Cx.Contour({ pen: Cx.Pen({ width: 2, color:{ rgb: '0000FF' } })
                         , brush: Cx.Brush({ color:{ rgb: 'FF0000' } })
                         , offset: 5, steps: 1, inside: false, outside: true
                         , includeHoles: false, combine: false
                         , chamfer_D: 0.1, chamfer_L: 0.1 });

<Contour Offset="5" Steps="1" Inside="False" Outside="True" 
         IncludeHoles="False" Combine="False" 
         Chamfer_D="0.1" Chamfer_L="0.1">
  <Pen Width="2"><Color RGB="0000FF"></Pen>
  <Brush><Color RGB="FF0000"></Color></Brush>
</Contour>

Add a contour to the figure made with a list of pens.

`Cx.PenContour`	Type	Definition
`pens`	Pens Array	Each pen defines a step with the given width

var process = Cx.PenContour({ pens: [
  Cx.Pen({ width: 5, color:{ rgb: 'FF0000' } })
, Cx.Pen({ width: 3, color:{ rgb: '0000FF' } })
]});

<PenContour>
  <Pens>
    <Pen Width="5"><Color RGB="FF0000"></Color></Pen>
    <Pen Width="3"><Color RGB="0000FF"></Color></Pen>
  </Pens>
</PenContour>

Add a shadow to the figure.

`Cx.Shadow`	Type	Def	Definition
`pen`	Pen	-	The pen to use
`brush`	Brush	-	The brush to use
`offsetX`	Number	`5`	The X offset of the shadow
`offsetY`	Number	`5`	The Y offset of the shadow
`gap`	Number	`10`	The gap between the figure and the shadow
`simplify`	Boolean	`false`	Simplified output

var process = Cx.Shadow({ pen: Cx.Pen({ width: 2, color:{ rgb: '0000FF' } })
                        , brush: Cx.Brush({ color:{ rgb: 'FF0000' } })
                        , offsetX: 5, offsetY: 5, gap: 10, simplify: false });

<Shadow OffsetX="5" OffsetY="5" Gap="5" Simplify="False">
  <Pen Width="2"><Color RGB="0000FF"></Pen>
  <Brush><Color RGB="FF0000"></Color></Brush>
</Shadow>

Same as shadow except that this process only uses raster pens.

`Cx.RasterShadow`	Type	Def	Definition
`pen`	Pen	-	The pen to use
`brush`	Brush	-	The brush to use
`offsetX`	Number	`5`	The X offset of the shadow
`offsetY`	Number	`5`	The Y offset of the shadow
`gap`	Gap	-	The gap between the figure and the shadow

var gap = Cx.RasterShadowGap({ pen: Cx.Pen({ width: 1, color:{ rgb: 'FFFFFF' } })} });
var process = Cx.RasterShadow({ pen: Cx.Pen({ width: 2, color:{ rgb: '0000FF' } })
                              , brush: Cx.Brush({ color:{ rgb: 'FF0000' } })
                              , offsetX: 5, offsetY: 5
                              , gap: gap };

<RasterShadow OffsetX="5" OffsetY="5">
  <Pen Width="2"><Color RGB="0000FF"></Pen>
  <Brush><Color RGB="FF0000"></Color></Brush>
  <Gap>
    <Pen Width="1"><Color RGB="FFFFFF"></Pen>
  </Gap>
</RasterShadow>

Gives the figure a 3d effect.

`Cx.Effect3d`	Type	Def	Definition
`borderIntensity`	Number	`0.7`	The border intensity
`borderSize`	Number	`1.0`	The border size
`contourOffset`	Number	`1.0`	The contour offset
`lightGap`	Number	`2.0`	The light gap
`lightIntensity`	Number	`0.7`	The light intensity
`lightSize`	Number	`3.0`	The light size
`lightSource`	Enum	`Up`	Options: `Up`, `Right`, `Down`, `Left`
`shadowIntensity`	Number	`0.35`	The shadow intensity
`shadowSizePercentage`	Number	`0.95`	The percentage of the shadow size
`slopeIntensity`	Number	`0.3`	The slope intensity
`slopeSize`	Number	`1.5`	The slope size

var process = Cx.Effect3d({ borderIntensity: 0.7, borderSize: 1.0, contourOffset: 1.0
                          , lightGap: 2.0, lightIntensity: 0.7, lightSize: 3.0, lightSource: 'Up'
                          , shadowIntensity: 0.35, shadowSizePercentage: 0.95
                          , slopeIntensity: 0.3, slopeSize: 1.5});

<Effect3d BorderIntensity:"0.7" BorderSize="1.0" ContourOffset="1.0"
          LightGap="2.0" LightIntensity="0.7" LightSize:"3.0" LightSource="Up"
          ShadowIntensity="0.35" ShadowSizePercentage="0.95"
          SlopeIntensity="0.3" SlopeSize="1.5"/>

Extrude3D

Gives the figure a 3d extrude effect.

`Cx.Extrude3D`	Type	Def	Definition
`pen`	Pen	-	The pen to use
`brush`	Brush	-	The brush to use
`depth`	Number	`10`	Depth of the extruding shape
`vanishingPoint`	Point	`(0,0)`	Vanishing point
`rotationX`	Number	`0`	Rotation with respect to x axis
`rotationY`	Number	`0`	Rotation with respect to y axis
`rotationZ`	Number	`0`	Rotation with respect to z axis

var process = Cx.Extrude3D({ pen: Cx.Pen({ width: 2, color:{ rgb: '0000FF' } })
                           , brush: Cx.Brush({ color:{ rgb: 'FF0000' } })
                           , depth: 10, vanishingPoint: Px(0,0)
                           , rotationX: 0, rotationY: 0, rotationZ: 0 });

<Extrude3D Depth="10" VanishingPoint="0 0" RotationX="0" RotationY:"0" RotationZ="0">
  <Pen Width="2"><Color RGB="0000FF"/></Pen>
  <Brush><Color RGB="FF0000"></Color></Brush>
</Extrude3D>

Split

Splits the figure.

`Cx.Split`	Type	Def	Definition
`overlap`	Number	`0`	The amount of the figure to overlap when splitting
`pos`	Number	`0.5`	Position where the gap will be, 0.5 is the middle of the figure
`turn`	Number	`0`	Angle to rotate the gap respect to the y axis
`gap`	Number	`10`	The size of the gap

var process = Cx.Split({ overlap: 0, pos: 0.5, turn: 0, gap: 10 });

<Split Overlap:"0" Pos="0.5" Turn="0" Gap="10"/>