Reference

Brushes and Pens

When reading the [[introduction]] you might have noticed among the parameters to initialize the figure that a brush is specified.

For each figure different kinds of brushes and pens can be specified and changed by changing the corresponding [[properties]].

Check the pens and brushes sample app ([[brushespens.html|https://github.com/Stahls/CadXDocumentation/blob/master/brushespens.html]] and [[brushespens.js|https://github.com/Stahls/CadXDocumentation/blob/master/brushespens.js]]) for some examples.

Brushes

figure.brush(brush);
doc.commit$();

Brush types: Brush, LinearGradientBrush, RadialGradientBrush, TextureBrush.

Brush

A regular solid color brush.

`Brush`	Type	Def	Definition
`color`	Color	Black	Sets the brush color

Cx.Brush({ color: { rgb: '000000' } });

<Brush><Color RGB="000000"></Color></Brush>

Linear Gradient Brush

Forms a linear gradient using the specified colors and points.

`LinearGradientBrush`	Type	Def	Definition
`colors`	Color Array	[ White, Black ]	Gradient Colors
`positions`	Number Array	[ 0,1 ]	Range (between 0 and 1) of the figure that each color will cover
`from`	Point	(0.0,0.5)	Relative point where the gradient begins
`to`	Point	(1.0,0.5)	Relative point where the gradient ends
`gammaCorrection`	Boolean	`true`	Gamma correction

Cx.LinearGradientBrush({ from: Px(0.0,0.5), to: Px(1.0,0.5)
                       , gammaCorrection: true 
                       , positions: [ 0, 1 ]
                       , colors: [ { rgb: 'FFFFFF' }
                                 , { rgb: '000000' } ] });

<LinearGradientBrush From="0.0 0.5" To="1.0 0.5" 
                     GammaCorrection="True"
                     Positions="0 1">
  <Color RGB="FFFFFF"></Color>
  <Color RGB="000000"></Color>
</LinearGradientBrush>

Radial Gradient Brush

Forms a radial gradient using the specified colors and points

`RadialGradientBrush`	Type	Def	Definition
`centerColor`	Color	White	Center color
`outerColors`	Color Array	`[Black]`	Outer colors
`positions`	Number Array	`[0,1]`	Range (between 0.0 and 1.0) of the figure that each color will cover
`center`	Point	(0.5,0.5)	Sets the relative point where the gradient begins
`radiuses`	Number	1.0	Sets the relative radiuses of the outer colors

Cx.RadialGradientBrush({ centerColor: { rgb: 'FFFFFF' }
                       , outerColors: [ { rgb: '000000' } ]
                       , positions: [ 0, 1 ]
                       , center: 0.5,0.5, radiuses: [1] )});

<RadialGradient CenterColor="White"  OuterColors="Black" Positions="0.0 1.0" Center="0.5 0.5" Radiuses="1.0"/>

Texture brush

Adds an image based texture to the figure.

`TextureBrush`	Type	Def	Definition
`imageLink`	String	`null`	Image Id on the server
`textureOffset`	Point	`(0.0,0.0)`	Texture relative offset
`targetOffset`	Point	`(0.0,0.0)`	Target relative offset
`matrix22`	Matrix	Identity	Transform to apply to the image
`transformMode`	Enum	`Full`	Options: `Fixed`, `Clamp`, `RotateOnly`, `Full`, `StretchX`, `StretchY`
`clippingRect`	Bounds	`(0,0,1,1)`	Relative bounds of the image

Cx.TextureBrush({ imageLink: '...', 
                , textureOffset: Px(0,0), targetOffset: Px(0,0)
                , matrix22: Mx(), transformMode: `Full`
                , clippingRect: Cx.Bounds(0,0,1,1) });

<TextureBrush ImageLink="..." 
              TextureOffset="0 0" TargetOffset="0 0"
              Matrix22="1 0 0 1" TransformMode="Full"
              ClippingRect="0 0 1 1"/>

Pens

Pen types: Pen, CutPen, EmptyPen, DisplayPen, MaskPen

var pen = Cx.Pen({ width: 2, color: { rgb: color } });
figure.pen(pen);
doc.commit$();

Pen

`Pen`	Type	Def	Definition
`color`	Color	Transparent	Pen color
`width`	Number	`5`	Pen width
`startCap`	Enum	`Flat`	Options: `Flat`, `Square`, `Round`, `Triangle`
`endCap`	Enum	`Flat`	Options: `Flat`, `Square`, `Round`, `Triangle`
`dashCap`	Enum	`Flat`	Options: `Flat`, `Round`, `Triangle`
`dashStyle`	Enum	`Solid`	Options: `Solid`, `Dash`, `Dot`, `DashDot`, `DashDotDot`
`lineJoin`	Enum	`Round`	Options: `Round`, `Bevel`, `Miter`, `MiterClipped`
`miterLimit`	Number	`10`	Miter limit
`behindFill`	Boolean	`true`	Draw the pen behind the fill

Cx.Pen({ color: { rgb: '000000' }, width: 5
       , startCap: 'Flat', endCap: 'Flat'
       , dashCap: 'Flat', dashStyle: 'Solid'
       , lineJoin: 'Round', miterLimit: 10
       , behindFill: true });

<Pen Width="5" StartCap="Flat" EndCap="Flat" 
     DashCap="Flat" DashStyle="Solid" 
     LineJoin="Round" MiterLimit="10.0" 
     BehindFill="True">
  <Color RGB="000000"></Color>
</Pen>