Using the Rectangle nodes

Use the Rectangle nodes to draw rectangles.

Creating a rectangle

To create a rectangle:

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

    You can create a 3D node only in a 3D node, such as the Scene node, and a 2D node only in a 2D node.

    ../_images/create-rectangle-2d.png ../_images/rectangle-2d-in-node-tree.png
  2. Set the fill and stroke of the rectangle. See Filling a shape and Using stroke.

    ../_images/rectangle-2d-with-fill-and-stroke-properties.png ../_images/rectangle-2d-with-fill-and-stroke-preview.png
  3. In the Properties, add and set:

    • Rectangle Width and Rectangle Height to set the size of the rectangle.

    • Rectangle Top-Left Corner to the position along the x and y axis where you want to set the top-left corner of the rectangle.

    ../_images/properties-rectangle-2d-size.png ../_images/preview-rectangle-size.png

Setting the shape of the rectangle corners

To set the shape of the rectangle corners:

  1. Create a Rectangle node. See Creating a rectangle.

  2. In the Properties, add and set the Corner Radius property to the amount of roundness that you want for the corners.

    ../_images/properties-rectangle-corner-radius.png ../_images/preview-rectangle-corner-radius.png
  3. To control the radius of each corner independently, add and set the Rectangle Individual Corners properties.

    For example, to make the top-left corner of the rectangle sharp, set the value of the Top-Left Corner Radius property to 0. The other three corners use the roundness that you set in the Corner Radius property.

    ../_images/properties-rectangle-individual-corners.png ../_images/preview-rectangle-individual-corners.png
  4. To fine-tune the shape of the rounded corners, add and set:

    • Rectangle > Corner Aspect Ratio to adjust the aspect ratio of the corners.

      By default, the radius of the corners along the x and y axes is equal to the value of the Corner Radius property.

      To adjust the radius along the x axis, set Corner Aspect Ratio to a value greater than 0. The radius along the x axis is \(\text{Corner Radius} * (1 - \text{Corner Aspect Ratio})\).

      To adjust the radius along the y axis, set Corner Aspect Ratio to a value less than 0. The radius along the y axis is \(\text{Corner Radius} * (1 + \text{Corner Aspect Ratio})\).

    • Corner Smoothness to the amount of smoothness that you want for the corners.

      This allows you to vary the shape between a rounded rectangle and a squircle. In a squircle, the edges of the rectangle curve smoothly outwards from each corner, forming an arc. For example, to match the shape of the corners in iOS icons, set the smoothness to 0.6.

    ../_images/properties-rectangle-2d-corners.png ../_images/preview-rectangle-corners-shape.png

Setting the stroke thickness of individual rectangle sides

To set the stroke thickness of individual rectangle sides:

  1. Create a Rectangle node and set it to use stroke. See Creating a rectangle and Using stroke.

    ../_images/properties-rectangle-2d-size-stroke.png ../_images/preview-rectangle-size.png
  2. In the Properties, add and set the Rectangle Individual Sides properties to control the thickness of the stroke on each side of the rectangle.

    For example, add and set the values of the Right Stroke Thickness and Bottom Stroke Thickness properties. The left and top sides use the thickness that you set in the Stroke Thickness property.

    ../_images/properties-rectangle-individual-sides.png ../_images/preview-rectangle-individual-sides.png

Setting the input area for a Rectangle 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.

../_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.

See also

Filling a shape

Using stroke

Gradients