Using the Path nodes

Use the Path nodes to draw arbitrary shapes based on SVG 1.1 compliant path data. See https://www.w3.org/TR/SVG11/paths.html#PathData.

Drawing complex shapes

To draw complex shapes:

1. In the Node Tree or Prefabs press Alt and right-click the node where you want to create a Path node and select either Path 3D, or Path 2D.

   Note that you can create a 3D node only inside 3D nodes, and a 2D node only inside 2D nodes.

   

2. In the Properties set the value of the Path Commands property to the SVG path data that defines the shape that you want to draw.

   For example, to draw a star, set Path Commands to

   M (120, 20) L (62, 200) (216, 90) (24, 90) (178, 200) Z
   

   where:

   • M indicates a moveto instruction which starts a new path at the coordinates x=120, y=20 relative to the top-left corner of the Path 2D node.

   • L starts a series of lineto instructions that each draw a line from the current point to a given coordinate, which becomes the new current point.

   • Z closes the path by drawing a straight line from the current point to the initial point of the path.

   • Uppercase letters indicate absolute coordinates within the Path 2D node. Use lowercase commands to indicate coordinates relative to the previous instruction.

   • Enclosing the coordinates in parentheses is optional and shown here to improve the readability of the commands.

   

3. To set the appearance of the shape, set its fill and stroke. See Filling a shape and Using stroke.

   

Setting the input area for a Path 2D node

When you enable hit testing for a node with the Input > Hit Testable property, the entire area of that node receives input by default.

To make only the area formed by the composited geometry of the shapes in a 2D shape node receive input, in the Node Tree or Prefabs select that node and in the Properties add and enable the Shape > Exact Hit Test property.

To learn about handling user input in Kanzi, in the Kanzi framework documentation see Working with > Input.

Examples of path commands

This table shows examples of path commands to draw lines and curves.

Shape	Command	Parameters	Example Path Commands	Result
Horizontal line	H (absolute) h (relative)	x+	M 25,75 h 200
Vertical line	V (absolute) v (relative)	y+	M 125,25 v 100
Elliptical arc	A (absolute) a (relative)	(xRadius, yRadius xRotation IsLargeArc, IsClockwise X1,Y1)+	M 25,75a 100,50 0 1,1 100,50
Cubic Bézier curve	C (absolute) c (relative)	(ControlX1, ControlY1 ControlX2, ControlY2 X1, Y1)+	M 50,150C 0,-50 350,50 200,150
Smooth cubic Bézier curve	S (absolute) s (relative)	(ControlX, ControlY X1, Y1)+	M 50,100C 50,0 150,0 150,100S 250,200 250,100
Quadratic Bézier curve	Q (absolute) q (relative)	(ControlX, ControlY X1, Y1)+	M 50,100Q 150,0 250,100
Smooth quadratic Bézier curve	T (absolute) t (relative)	(X1, Y1)+	M 20,100Q 70,-50 120,100T 240,100

See also

Filling a shape

Using stroke