Keep Intrinsic Aspect Ratio
Start here

# Shape Node Style Demo

This demo shows the main features of the ShapeNodeStyle class, most notably its supported shapes and the shape-specific effects of keepIntrinsicAspectRatio.

To illustrate the effects of the latter feature, three nodes with different aspect ratios are shown for each shape: green (1:1), blue (2:1) and yellow (1:2).

## Things to Try

- Observe how the shape is rendered depending on the node's aspect ratio.
- Select and resize nodes and observe how the shape changes.
- Observe how edges are cropped at the visual bounds of the nodes. Move nodes to see how cropping works for every point on the visual border.
- Enable and disable the keepIntrinsicAspectRatio property using the toggle button in the toolbar. Observe its effect for shapes with different width:height aspect ratios.

## Related Demos

- Rectangle Node Style Demo
- Group Node Style Demo
- Arrow Node Style Demo
- Step 01 Create A Rectangle