CropperShade

The CropperShade interface provides properties and methods for manipulating the layout and presentation of <cropper-shade> elements.

Examples

Basic

:::live-demo

html

<cropper-shade></cropper-shade>

:::

:::tip The default width and height of this element is 0. :::

Specify position and size

:::live-demo

html

<cropper-canvas background>
  <cropper-shade x="240" y="5" width="160" height="90"></cropper-shade>
</cropper-canvas>

:::

Customize the color

:::live-demo

html

<cropper-canvas background>
  <cropper-shade x="240" y="5" width="160" height="90" theme-color="rgba(0, 0, 0, 0.35)"></cropper-shade>
</cropper-canvas>

:::

Toggle visibility on pointer down/up dynamically

:::live-demo

html

<cropper-canvas background>
  <cropper-image src="/cropperjs/picture.jpg" alt="Picture" rotatable scalable skewable translatable></cropper-image>
  <cropper-shade hidden></cropper-shade>
  <cropper-handle action="select" plain></cropper-handle>
  <cropper-selection movable resizable hidden>
    <cropper-handle action="move" plain></cropper-handle>
  </cropper-selection>
</cropper-canvas>

:::

:::tip The <cropper-shade> element will automatically synchronize the position and size of the currently active <cropper-selection> element. :::

:::tip The hidden attribute is a native global attribute. :::

Properties

Inherits properties from its parent, CropperElement, and implements the following properties:

Name	Type	Default	Options	Description
x	`number`	`0`	-	Indicates the x-axis coordinate of the element.
y	`number`	`0`	-	Indicates the y-axis coordinate of the element.
width	`number`	`0`	-	Indicates the width of the element.
height	`number`	`0`	-	Indicates the height of the element.
slottable	`boolean`	`false`	-	Indicates whether this element is slottable.
themeColor	`string`	`"rgba(0, 0, 0, 0.65)"`	-	Indicates the color of the shade.

Methods

$change

Syntax:
- $change(x, y)
- $change(x, y, width, height)
Arguments:
- x:
  - Type: number
  - The new position in the horizontal direction.
- y:
  - Type: number
  - The new position in the vertical direction.
- width:
  - Type: number
  - Default: this.width
  - The new width.
- height:
  - Type: number
  - Default: this.height
  - The new height.
Returns:
- Type: CropperShade
- The element instance for chaining.

Changes the position and/or size of the shade.

$reset

Syntax: $reset()
Returns:
- Type: CropperShade
- The element instance for chaining.

Resets the shade to its initial position and size.

$render

Syntax: $render()
Returns:
- Type: CropperShade
- The element instance for chaining.

Refreshes the position or size of the shade.

Slots

There is only one default slot in this element.

You can disable it by setting the slottable property to false:
html
<cropper-shade slottable="false"></cropper-shade>