ImageProcessing.Compute.Path.RenderMultiPath
This node generates an image from multiple SVG path data inputs and styling information. In the SVG format a <path> tag contains both path data and styling information. The path data is given in the "d" attribute and styling is given in additional attributes, e.g.,
<path d="M 72 182 L 286 288" stroke='#000000' stroke-width='4'/>
The RenderMultiPathNode requires this input in separate text vectors. The path data can be defined as a vector of text nodes via the paths input slot. The styling information can be given as a vector of text nodes via the styles input slot. The advantage is that styling information can be re-used for different paths.
E.g., to represent the 4-pixel wide black line from the example above, one would need to add a Text node with content "M 72 182 L 286 288" to the vector at the paths input slot and a Text node with " stroke='#000000' stroke-width='4' " to the vector at the styles input slot.
The two tables below describe the path data format and styling information format. However, these are provided only for reference. Typically, there
are other nodes that generate the required input. For example, path data can be created interactively with
the ImageProcessing.
The example MultiplePaths demonstrates the usage of these nodes.
Path data format
| Command character | Number of numeric values | Example | Example semantic |
M | 2 | M 30 40 | Move to absolute position $x=30$, $y=40$ |
m | 2 | m 10 20 | Move to relative position $x=\tilde{x}+20$, $y=\tilde{y}+10$, where $\tilde{x}$ and $\tilde{y}$ define the position after execution of the previous command |
L | 2 | L 50 60 | Line to absolute position $x=50$, $y=60$ |
l | 2 | l 20 10 | Line to relative position $x=\tilde{x}+20$, $y=\tilde{y}+10$ |
H | 1 | H 50 | Horizontal line to absolute $x$-position $x=50$, $y=\tilde{y}$ |
h | 1 | h 20 | Horizontal line to relative $x$-position $x=\tilde{x}+20$, $y=\tilde{y}$ |
V | 1 | V 10 | Vertical line to absolute $y$-position $x=\tilde{x}$, $y=10$ |
v | 1 | v 10 | Vertical line to relative $y$-position $x=\tilde{x}$, $y=\tilde{y}+10$ |
C | 6 | C 10 20 30 40 50 60 | Cubic Bézier curve to absolute position $x=50$, $y=60$, where $x_1=10$, $y_1=20$ and $x_2=30$, $y_2=40$ define the absolute positions of the curve's control points |
c | 6 | c 10 20 30 40 50 60 | Cubic Bézier curve to relative position $x=\tilde{x}+50$, $y=\tilde{y}+60$, where $x_1=\tilde{x}+10$, $y_1=\tilde{y}+20$ and $x_2=\tilde{x}+30$, $y_2=\tilde{y}+40$ define the positions of the curve's control points |
S | 4 | C 30 40 50 60 | Cubic Bézier curve to absolute position $x=50$, $y=60$, where $x_1=2\tilde{x}-\tilde{x}_2$, $y_1=2\tilde{y}-\tilde{y}_2$ and $x_2=30$, $y_2=40$ define the positions of the curve's control points |
s | 4 | c 30 40 50 60 | Cubic Bézier curve to relative position $x=\tilde{x}+50$, $y=\tilde{y}+60$, where $x_1=2\tilde{x}-\tilde{x}_2$, $y_1=2\tilde{y}-\tilde{y}_2$ and $x_2=\tilde{x}+30$, $y_2=\tilde{y}+40$ define the positions of the curve's control points |
Q | 4 | Q 10 20 50 60 | Quadratic Bézier curve to absolute position $x=50$, $y=60$, where $x_1=10$, $y_1=20$ define the absolute position of the curve's control point |
q | 4 | c 10 20 50 60 | Quadratic Bézier curve to relative position $x=\tilde{x}+50$, $y=\tilde{y}+60$, where $x_1=\tilde{x}+10$, $y_1=\tilde{y}+20$ define the position of the curve's control point |
T | 2 | T 50 60 | Quadratic Bézier curve to absolute position $x=50$, $y=60$, where $x_1=2\tilde{x}-\tilde{x}_1$, $y_1=2\tilde{y}-\tilde{y}_1$ define the position of the curve's control point |
t | 2 | t 50 60 | Quadratic Bézier curve to relative position $x=\tilde{x}+50$, $y=\tilde{y}+60$, where $x_1=2\tilde{x}-\tilde{x}_1$, $y_1=2\tilde{y}-\tilde{y}_1$ define the position of the curve's control point |
Z | 0 | Z | closes the current path |
z | 0 | z | closes the current path |
Detailed explanation of the SVG path data format can be found in the SVG specification. The elliptical arc commands "A" and "a" are currently not fully supported.
Path style format
| Attribute name | Attribute value | Example | Example semantic |
stroke | color or "none" | stroke="black" | Stroke path with black color |
stroke="#000000" | Stroke path with black color | ||
stroke="#FF0000" | Stroke path with red color | ||
stroke="none" | Not stroke the path | ||
stroke-opacity | float value in range [0.0, 1.0] | stroke-opacity="0.5" | Stroke path with 50% opacity |
stroke-width | float value | stroke-width="4" | Width of stroke in pixels |
stroke-linecap | "butt" or "square" or "round" | stroke-linecap="round" | Stroke starts and ends with a round cap |
stroke-linejoin | "miter" or "round" or "bevel" | stroke-linejoin="round" | Subpaths are joined with a round edge |
stroke-dasharray | array of dash values | stroke-dasharray="5,5" | Draw a dashed path by toggling between stroke and blank every 5 pixels |
fill | color or "none" | fill="white" | Fill path with white color |
fill="#FFFFFF" | Fill path with white color | ||
fill="#00FF00" | Fill path with green color | ||
fill="none" | Not fill the path | ||
fill-opacity | float value in range [0.0, 1.0] | fill-opacity="0.25" | Fill path with 24% opacity |
Detailed explanation of the SVG painting style attributes can be found in the SVG specification. Only the attributes that are listed above are supported.
ImageProcessing.Compute.Path.PathStyle
The PathStyle node outputs a text node with path style information formatted as described in the table above. It is designed to work in combination with
the ImageProcessing.The example MultiplePaths demonstrates the usage of this node.