CircleStencil

A circle crop region registered through its ancestor cropper context.

<script lang="ts">
	import { Cropper, CircleStencil } from 'svelte-advanced-cropper';
</script>

<Cropper src="/photo.jpg" style="height: 360px">
	<CircleStencil grid />
</Cropper>

Props

All optional props without a default remain undefined. class accepts Svelte ClassValue; style is a CSS string.

Prop	Type	Default
`children`	`Snippet`	`undefined`
`coordinates`	`Coordinates` \| `((state: CropperState` \| `null) => Coordinates)`	`undefined`
`handler`	`Snippet<[HandlerSnippetProps]>`	`SimpleHandler`
`handlers`	`boolean` \| `Partial<Record<OrdinalDirection, boolean>>`	Four corners
`lines`	`boolean` \| `Partial<Record<CardinalDirection, boolean>>`	All four cardinal directions
`line`	`Snippet<[LineSnippetProps]>`	`SimpleLine`
`class`	`ClassValue`	`undefined`
`style`	`string`	`undefined`
`movable`	`boolean`	`true`
`resizable`	`boolean`	`true`
`grid`	`boolean`	`undefined`
`disabled`	`boolean`	`undefined`

Omitted grid and local disabled are falsy. The effective disabled value also includes the cropper’s disabled state. resizable={false} disables controls; handlers={false} and lines={false} hide them. A direction map shows only entries whose value is true; true enables every direction.

coordinates controls display coordinates in boundary pixels. Without it, the stencil reads getStencilCoordinates(). It does not replace crop state. The optional grid appears during interactions, with nine divisions while rotating and three otherwise.

Snippets and context

handler: Snippet<[HandlerSnippetProps]> and line: Snippet<[LineSnippetProps]> replace interactive controls. Forward the supplied positioning class and original native event. children: Snippet renders inside the draggable crop region above the overlay.

Requires CropperContext and registers during initialization. There are no imperative component methods and no nested context provider.

Registers aspectRatio: 1 and BoundingBoxType.Circle. The circular appearance does not make exported pixels circular: canvas export remains rectangular; mask the result separately if needed.

Selectors

.advanced-cropper-circle-stencil owns --movable, --moving, --resizable, --resizing, --disabled, __bounding-box, __draggable-area, __overlay, __preview and __grid. See expanded selectors.