Geometric Shape Drawing Overview

There are two methods for drawing geometric shapes: (1) by directly drawing them using the Shape component; (2) by clipping a component into a geometric shape using the shape clipping attribute clipShape.

When to Use

Method Use Case
Drawing geometric shapes (Shape) Create components of a specified shape and draw geometric graphics directly on the page.
Shape clipping (clipShape) Clip a component into a specified geometric shape.

Constraints

  • For the Shape component: You can use the Shape component as a parent container to achieve SVG-like effects, or use its various child components independently for drawing.

  • For the clipShape attribute: Clipping does not prevent the clipped area from responding to bound gesture events.