CropperSelection

CropperSelection 接口提供了用于操作 <cropper-selection> 元素的布局和表示的属性和方法。

示例

基本

提示

此元素的默认宽度和高度为 0。

自定义初始覆盖范围

自定义位置和大小

带有手柄

多选区

将 multiple 属性设置为 true，以支持在同一图像上的创建多个选区。

属性

从其父级 CropperElement 继承属性，并实现以下属性：

名称	类型	默认值	可选值	描述
x	`number`	`0`	-	指示选区的 x 轴坐标。
y	`number`	`0`	-	指示选区的 y 轴坐标。
width	`number`	`0`	-	指示选区的宽度。
height	`number`	`0`	-	指示选区的高度。
aspectRatio	`number`	`NaN`	-	指示选区的纵横比，必须是正数。
initialAspectRatio	`number`	`NaN`	-	指示选区的初始长宽比，必须一个正数。
initialCoverage	`number`	`NaN`	-	指示选区的初始覆盖范围，必须是在 `0` （0％）和 `1` （100%）之间的正数。
movable	`boolean`	`false`	-	指示此元素是否可移动。
resizable	`boolean`	`false`	-	指示此元素是否可调整大小。
zoomable	`boolean`	`false`	-	指示此元素是否可缩放。
multiple	`boolean`	`false`	-	指示是否支持多选区。
keyboard	`boolean`	`false`	-	指示是否支持键盘控制。
outlined	`boolean`	`false`	-	指示是否显示轮廓线。
precise	`boolean`	`false`	-	指示是否保留 `x`、`y`、`width` 和 `height` 属性的精确值。

支持的键盘键：

Delete 或 Command + Backspace：删除活动选区。
ArrowLeft：将活动选区向左移动 1 个像素。
ArrowRight：将活动选区向右移动 1 个像素。
ArrowUp：将活动选区向上移动 1 个像素。
ArrowDown：将活动选区向下移动 1 个像素。
+：将活动选区放大 10%。
-：将活动选区缩小 10%。

方法

$center

语法：$center()
返回值：
- 类型：CropperSelection
- 元素实例。

将选区与其父元素的中心对齐。

$move

语法：
- $move(x)
- $move(x, y)
等同于：
- $moveTo(selection.x + x)
- $moveTo(selection.x + x, selection.y + y)
参数：
- x：
  - 类型：number
  - 水平方向的移动距离。
- y：
  - 类型：number
  - 默认值：x
  - 垂直方向的移动距离。
返回值：
- 类型：CropperSelection
- 元素实例。

移动选区。

$moveTo

语法：
- $moveTo(x)
- $moveTo(x, y)
参数：
- x：
  - 类型：number
  - 水平方向的新位置。
- y：
  - 类型：number
  - 默认值：x
  - 垂直方向的新位置。
返回值：
- 类型：CropperSelection
- 元素实例。

移动选区到指定位置。

$resize

语法：
- $resize(action)
- $resize(action, offsetX)
- $resize(action, offsetX, offsetY)
- $resize(action, offsetX, offsetY, aspectRatio)
参数：
- action：
  - 类型：string
  - 可选值："n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", and "sw-resize".
  - 指示要调整大小的边或角。
- offsetX：
  - 类型：number
  - 默认值：0
  - 指定边或角的水平偏移。
- offsetY：
  - 类型：number
  - 默认值：0
  - 指定边或角的垂直偏移。
- aspectRatio：
  - 类型：number
  - 默认值：this.aspectRatio
  - 必要时计算新尺寸的纵横比。
返回值：
- 类型：CropperSelection
- 元素实例。

调整指定边或角上选区的大小。

$zoom

语法：
- $zoom(scale)
- $zoom(scale, x, y)
参数：
- scale：
  - 类型：number
  - 缩放系数。正数表示放大，负数表示缩小。
- x：
  - 类型：number
  - 默认值：选区在水平方向上的中心。
  - 水平方向的缩放原点。
- y：
  - 类型：number
  - 默认值：选区在垂直方向上的中心。
  - 垂直方向的缩放原点。
返回值：
- 类型：CropperSelection
- 元素实例。

示例：

cropperSelection.$zoom(0.1); // 放大 10%
cropperSelection.$zoom(-0.1); // 缩小 10%

缩放选区。同时直接变更选区的宽度和高度（以像素为单位）。

$change

语法：
- $change(x, y)
- $change(x, y, width, height)
- $change(x, y, width, height, aspectRatio)
参数：
- x：
  - 类型：number
  - 水平方向的新位置。
- y：
  - 类型：number
  - 垂直方向的新位置。
- width：
  - 类型：number
  - 默认值：this.width
  - 新宽度。
- height：
  - 类型：number
  - 默认值：this.height
  - 新高度。
- aspectRatio：
  - 类型：number
  - 默认值：this.aspectRatio
  - 仅限当前变更的新纵横比。
返回值：
- 类型：CropperSelection
- 元素实例。

变更选区的位置和/或大小。

$reset

语法：$reset()
返回值：
- 类型：CropperSelection
- 元素实例。

将选区重置为其初始位置和大小。

$render

语法：$render()
返回值：
- 类型：CropperSelection
- 元素实例。

刷新选区的位置或大小。

$toCanvas

语法：
- $toCanvas()
- $toCanvas(options)
参数：
- options：
  - 类型：Object
  - 可用选项。
  - 属性：
    - width：
      - 类型：number
      - 画布的宽度。
    - height：
      - 类型：number
      - 画布的高度。
    - beforeDraw：
      - 类型：Function
      - 在将图像绘制到画布上之前调用的函数。
      - 语法：beforeDraw(context, canvas)
      - 参数：
        context：
        类型：CanvasRenderingContext2D
        画布的 2D 渲染上下文。
        canvas：
        类型：HTMLCanvasElement
        画布元素本身。
      - 示例：function (context) { context.filter = 'grayscale(100%)'; }
返回值：
- 类型：Promise
- 一个以生成的画布元素为给定值解析后的 Promise 对象。
Example：

生成一个真实的画布元素，如果有图像（仅限选定区域），则将其绘制到其中。

事件

change

当选区的位置和尺寸即将发送变化时触发该事件。

事件：
- event.bubbles：true
- event.cancelable：true
- event.composed：true
- event.detail：
  - 类型：Object
  - 选区的位置和大小数据。
- event.detail.x：
  - 类型：number
  - 选区的 x 轴坐标。
- event.detail.y：
  - 类型：number
  - 选区的 y 轴坐标。
- event.detail.width：
  - 类型：number
  - 选区的宽度。
- event.detail.height：
  - 类型：number
  - 选区的高度。
示例：

<cropper-selection id="selection"></cropper-selection>

<script>
document.querySelector('#selection').addEventListener('change', function (event) {
  console.log(event);
});
</script>

插槽

此元素中只有一个默认插槽。

你可以通过将 slottable 属性设置为 false 来禁用它：
<cropper-selection slottable="false"></cropper-selection>

# CropperSelection

# 示例

# 基本

# 自定义初始覆盖范围

# 自定义位置和大小

# 带有手柄

# 多选区

# 属性

# 方法

# $center

# $move

# $moveTo

# $resize

# $zoom

# $change

# $reset

# $render

# $toCanvas

# 事件

# change

# 插槽