@motion-script/core / Clip
Class: Clip
Defined in: render/clip.ts:52
A renderer-agnostic, chainable clip-region builder — Graphics for clipping.
Clip records a sequence of shape declarations (and optional cut()s) that
the renderer unions into a single clip path. Multiple shapes combine, so a
clip can be any compound silhouette, not just a single rect or ellipse:
const c = new Clip() .rect({ width: 200, height: 120, cornerRadius: 16 }) .ellipse({ x: 80, width: 60, height: 60 }) // unions with the rect .ellipse({ x: -80, width: 40, height: 40 }) .cut(); // punches the last hole ctx.beginClip(c); ...draw clipped content... ctx.endClip();
A Clip carries no paint — it's purely the outline. It's what a ShapeNode
returns from clipSelf() to describe both its clip boundary and the
silhouette its backdrop effects (blur, magnify, …) are confined to, so a
single definition drives every clip the node needs.
Constructors
Constructor
new Clip():
Clip
Returns
Clip
Methods
cut()
cut():
this
Defined in: render/clip.ts:96
Use the last-declared shape as a cutter: union the shapes before it and subtract that last shape, punching a hole in the clip region. Mirrors Graphics.cut.
Returns
this
ellipse()
ellipse(
state):this
Defined in: render/clip.ts:62
Parameters
state
Partial<EllipseState> & ShapeAnchorInput
Returns
this
isEmpty()
isEmpty():
boolean
Defined in: render/clip.ts:109
True when no shape op has been recorded — the clip region is empty.
Returns
boolean
line()
line(
state):this
Defined in: render/clip.ts:74
Parameters
state
Partial<LineState>
Returns
this
ops()
ops(): readonly
ClipOp[]
Defined in: render/clip.ts:104
The recorded ops, in order. Consumed by RenderContext.beginClip().
Returns
readonly ClipOp[]
path()
path(
state):this
Defined in: render/clip.ts:68
Add a vector path to the clip region, from a PathState or a PathBuilder.
Parameters
state
Partial<PathState> | PathBuilder
Returns
this
polygon()
polygon(
state):this
Defined in: render/clip.ts:79
Parameters
state
Partial<PolygonState> & ShapeAnchorInput
Returns
this
polygram()
polygram(
state):this
Defined in: render/clip.ts:84
Parameters
state
Partial<PolygramState> & ShapeAnchorInput
Returns
this
rect()
rect(
state):this
Defined in: render/clip.ts:57
Parameters
state
Partial<RectState> & ShapeAnchorInput
Returns
this