Using 2D shape nodes

Use 2D shape nodes to draw vector shapes in 2D space.

These 2D shape nodes are available in Kanzi Shapes:

Filling a 2D shape node

Use a brush to fill the shape in a 2D shape node.

To fill a 2D shape:

  1. In the Library > Materials and Textures > Brushes, create the brush that you want to use to fill a 2D shape node.

    For example, create a Color Brush.

    ../_images/fill-color-brush.png
  2. Create or select a 2D shape node that you want to fill.

    For example, in the Node Tree, create a Path 2D node. In the Properties, set the Path Commands property to

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

    When you create a closed 2D shape, that shape by default has a white fill and no stroke.

    ../_images/path-2d-in-node-tree.png ../_images/path-2d-path-commands.png
  3. In the Properties, add the Foreground Brush property and set it to the brush that you created.

    ../_images/path-2d-foreground-brush-set.png
  4. (Optional) To set the appearance of the outline of the 2D shape, add and set the Stroke Brush and Stroke Thickness properties. See Using stroke.

    Kanzi renders the outline on top of the fill and blends the two brushes.

    ../_images/stroke-color-brush.png

Setting the stroke of a 2D shape

To set the style of the stroke of a 2D shape:

  1. In the Library > Materials and Textures > Brushes, create the brush that you want to use to define the appearance of a line or outline of a shape.

    For example, create a Color Brush.

    ../_images/stroke-color-brush1.png
  2. Create or select a shape node whose stroke you want to set.

    For example, in the Node Tree, create an Ellipse 2D node.

    When you create a closed 2D shape, that shape by default has a white fill and no stroke.

    ../_images/ellipse-2d-in-node-tree.png ../_images/ellipse-2d-in-preview.png
  3. In the Properties, add and set:

    • Stroke Brush to the brush that you created

    • Stroke Thickness to the width that you want for the outline of the shape

    • (Optional) Foreground Brush to the brush that you want to use to fill the shape

      To draw the shape using only the stroke and no fill, set Foreground Brush to < No Brush >.

    ../_images/stroke-brush-and-thickness.png

Setting the input area for a 2D shape 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.

../_images/hit-testable-enabled.png ../_images/exact-hit-test-enabled.png

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