AddPath
AddPath ( pathData ; fillColor ; fillColorVariant ; borderStroke ; borderColor ; borderColorVariant ; shadowEffect ; shadowColor )
| Argument | Type | Range | Default | Note |
|---|---|---|---|---|
| pathData | num[] | -inf..+inf | (required) | |
| fillColor | rgba | 0..255 | white | |
| fillColorVariant | int | -1..128 | solid | |
| borderStroke | num[] | 0..1000 | 1 | Dimension:[pt] |
| borderColor | rgba | 0..255 | black | |
| borderColorVariant | int | -1..128 | solid | |
| shadowEffect | num[] | -1000..1000 | 0 | |
| shadowColor | rgba | 0..255 | #888a |
Examples
Description
The function AddPath() is a very general and, at the same time, extremely powerful function for drawing 2D objects. By using the 1st argument pathData, the shape of the object is clearly defined. A total of 10 path commands are available for this. The command letters are case sensitive — use uppercase letters for absolute coordinate values, lowercase letters for coordinates relative to the current point. Path commands and their values are to be separated by spaces, tabs or line feeds.
| Command | Arguments | Example | |
|---|---|---|---|
| Z | Close path | (none) | Z |
| M | Move to | xPt yPt | M 100 100 |
| L | Line to | xPt yPt | L 100 100 |
| Q | Quadratic Bézier to | xControlPt yControlPt xEndPt yEndPt | Q 50 20 100 100 |
| C | Cubic Bézier to | xControlPt1 yControlPt1 xControlPt2 yControlPt2 xEndPt yEndPt | C 25 20 75 50 100 100 |
| A | Elliptical arc to | xEndPt yEndPt xRadius yRadius xAxisRotation largeArcFlag sweepFlag | A 100 100 50 50 0 0 1 |
| H1 | Horizontal line to | xEndPt | H 100 |
| V1 | Vertical line to | yEndPt | V 100 |
| T1 | Shorthand quad. Bézier | xEndPt yEndPt | T 100 100 |
| S1 | Shorthand cubic Bézier | xControlPt2 yControlPt2 xEndPt yEndPt | S 75 50 100 100 |
1 xmCHART 4.0.4 or higher required.
Elliptical Arc
x-Axis rotation: clockwise in degrees
Large arc flag: 0...arc ≤ 180 degrees, 1...arc > 180 degrees
Sweep flag: 0...counter-clockwise, 1...clockwise
Shorthand quadratic Bézier:
The control point is assumed to be the reflection of the control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a Q, q, T or t, assume the control point is coincident with the current point.
Shorthand cubic Bézier:
The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. If there is no previous command or if the previous command was not a C, c, S or s, assume the first control point is coincident with the current point.
| | ADD_PATH_01 |
| 1 | OpenDrawing(100;90) |
| 2 | AddPath(M 10 10 /* Move to 10 10 */ |
| 3 | L 90 10 /* Horizontal line to 90 10 */ |
| 4 | L 50 79.3 /* Line to 50 79.3 */ |
| 5 | Z) /* Close path. */ |
| 6 |
| | ADD_PATH_02 |
| 1 | OpenDrawing(100;90) |
| 2 | AddPath(M 10 20 /* Move to 10 20 */ |
| 3 | A 90 20 40 10 0 0 1 /* Arc to 90 20 */ |
| 4 | A 10 20 40 10 0 0 1 /* Arc to 10 20 */ |
| 5 | L 50 79.3 /* Line to 50 79.3 */ |
| 6 | L 90 20) /* Line to 90 20 */ |
| 7 |
The arguments fillColor, fillColorVariant, borderStroke, borderColor, borderColorVariant, shadowEffect and shadowColor make it possible to draw objects with fill, border and shadow if desired.
| | ADD_PATH_03 |
| 1 | OpenDrawing(100;90) |
| 2 | AddPath(M 10 10 h 80 l -40 69.3 z;steelBlue;solid;0;;;0 0 5) |
| 3 |
| | ADD_PATH_04 |
| 1 | OpenDrawing(200;120) |
| 2 | AddPath(M 30 90 /* Move to 30 90 */ |
| 3 | L 30 60 /* Line to 30 60 */ |
| 4 | A 60 30 30 30 0 0 0 /* Arc to 60 30 */ |
| 5 | L 140 30 /* Line to 140 30 */ |
| 6 | A 170 60 30 30 0 0 0 /* Arc to 170 60 */ |
| 7 | L 170 90 /* Line to 170 90 */ |
| 8 | Z; /* Close path. */ |
| 9 | 255 155 155;solid; /* Fill */ |
| 10 | |
| 11 | 2 2 5;200 200 200) /* Shadow */ |
| 12 |
| | ADD_PATH_05 |
| 1 | OpenDrawing(260;130) |
| 2 | OpenView(0;0;130;130) |
| 3 | AddPath(M 25 25 /* Move to 25 25 */ |
| 4 | V 90 /* Vertical line to 25 90 */ |
| 5 | A 40 105 15 15 0 0 0 /* Arc to 40 105 */ |
| 6 | H 105 /* Horizontal line to 105 105 */ |
| 7 | V 40 /* Vertical line to 105 40 */ |
| 8 | A 90 25 15 15 0 0 0 /* Arc to 90 25 */ |
| 9 | Z; /* Close */ |
| 10 | 255 155 155 50;solid; /* Fill */ |
| 11 | |
| 12 | 3 3 8;gray) /* Shadow effect */ |
| 13 | |
| 14 | OpenView(130;0;130;130) |
| 15 | AddPath(M 25 75 /* Move to 25 75 */ |
| 16 | Q 70 15 115 75 /* Quadratic Bézier to 115 75 */ |
| 17 | C 70 135 70 15 25 75; /* Cubic Bézier to 25 75 */ |
| 18 | 70 130 180 60;solid; /* Fill */ |
| 19 | |
| 20 | 3 3 5) /* Shadow effect */ |
| 21 | |
| 22 |
A path definition can also be based on several partial paths, i.e. the argument pathData contains several closed paths. This makes it possible to define objects with holes.
| | ADD_PATH_06 |
| 1 | OpenDrawing(200;120) |
| 2 | AddPath(M 30 95 /* Move to 30 95 */ |
| 3 | L 30 55 /* Line to 30 55 */ |
| 4 | A 60 25 30 30 0 0 1 /* Arc to 60 25 */ |
| 5 | L 140 25 /* Line to 140 25 */ |
| 6 | A 170 55 30 30 0 0 1 /* Arc to 170 55 */ |
| 7 | L 170 95 /* Line to 170 95 */ |
| 8 | Z /* Close outer path. */ |
| 9 | /* Punch out square. */ |
| 10 | M 100 40 /* Move to 100 40 */ |
| 11 | L 120 60 /* Line to 120 60 */ |
| 12 | L 100 80 /* Line to 100 80 */ |
| 13 | L 80 60 /* Line to 80 60 */ |
| 14 | Z; /* Close inner path. */ |
| 15 | 70 130 180 60;solid; /* Fill */ |
| 16 | 3;70 130 180) /* Border */ |
| 17 |
Please note that the border of the AddPath() function is centered along the defined path in opposite to the graphics primitives AddRect() , AddFrame() , AddOval() , AddEllipse() , AddRoundRect() , AddRoundFrame() , AddSlice() and AddArc() where the border is drawn inside of the defined rectangle and not centered along the rectangular bounds. Example:
| | ADD_PATH_07 |
| 1 | OpenDrawing(225;240) |
| 2 | AddText( 62;25;"AddFrame()\nAddEllipse()";Verdana;10;plain;80 80 80;center) |
| 3 | AddText(162;30;"AddPath()";Verdana;10;plain;80 80 80;center) |
| 4 | OpenView(10;40;225;200) |
| 5 | /* Left square and oval. */ |
| 6 | AddFrame(20;20;60;60;10.0;80 80 80) |
| 7 | AddEllipse(20;110;60;60;10.0;80 80 80) |
| 8 | /* Right square and oval created as path. */ |
| 9 | AddPath(M 120 20 l 60 0 l 0 60 l -60 0 z;;;10.0;80 80 80) |
| 10 | AddPath(M 120 140 a 60 0 30 30 0 0 0 a -60 0 30 30 0 0 0 z;;;10.0;80 80 80) |
| 11 | /* Vertical lines. */ |
| 12 | |
| 13 | |
| 14 | |
| 15 | |
| 16 | /* Horizontal lines. */ |
| 17 | |
| 18 | |
| 19 | |
| 20 | |
| 21 | |
| 22 |
