useKite

Hook used to a kite.

It can be either a convex or concave kite. A convex kite is the usual kite, which every vertex points outward.

On the other hand, a concave kite, the vertex of shorter sides are point inward, which will form a v-shape or upside-down dart.

Configuration

(KiteConfig | undefined) useKite accepts following configurations:

Property	Type	Default	Description
tLength	number	50	Upper side length of a kite (usually the shorter side).
bLength	number	75	Lower side length of a kite (usually the longer side).
isConcave	boolean	false	Is the kite concave?

extends Primitive Configuration

(PrimitiveConfig) Base configurations for all primitives.

Property	Type	Default	Description
scale	number | Vertex	1	Scaling factor of the primitive. If Vertex is provided, it will scale x and y dimension accordingly (optional).
rotate	number	0	Rotation of the primitive, in degrees, in clockwise manner (optional).
position	Vertex	{ x: 0, y: 0 }	Moving distance away from the primitive drawing centre. By default, primitive will start drawing in origin (0, 0) (optional).

info

scale, rotate and position can be considered as transformation of polygon after drawn, where position can be considered as transform: translate of css to the primitive.

The polygon will first be scaled, then rotated and lastly, translated.

tip

You can create a dart/arrow by creating a concave kite and using rotate to change its pointing direction.

note

Multiple kites can be created by 2 same side lengths, either on the "slimmer" or "squarer" side.

Right now, the implementation will always give one same kite by the same side lengths provided. We're thinking of adding an angle config to define the elevating angle of shorter side against the x-axis (horizontal line), but hold it because it may not make a great mathematical sense for creating a kite.

If you need to define that angle, please try usePolygon({ vertices }) instead, by defining the vertices yourself.

Returns

(Primitive) All primitive return the following properties:

Property	Type	Description
vertices	Vertex[]	Vertices of the primitive.
edges	Edge[]	Edges of the primitive.
faces	Face[]	Faces of the primitive.
centroid	Vertex	Centroid (geometric centre) of primitive.
boundingBox	BoundingBox	Space constraint of the primitive, with properties x, y, width and height.
svgPath	string	SVG path representing the shape of the primitive.
drawToCanvas	(ctx: CanvasRenderingContext2D) => void	Callback that draws the primitive to a canvas context.
modifyConfig	(newConfig: Partial<KiteConfig>) => void	Callback to update the configuration of the primitive.

Example

import { useKite } from "react-use-polygon";

// A convex kite
const kite = useKite({ length: 50, length: 75 });

// A dart/arrow poiting right
const arrow = useKite({ isConcave: true, rotate: 90 });