参考
图片裁剪 Image Cropper
ImageCropper：图片裁切器。圆角容器承载照片，选区由细发丝线框出并有光照效果。部件：Root、Viewport、Image、Selection、Handle、Grid、Context。
Root · Viewport · Image · Selection · Handle · Grid
#Grid
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
axis | "horizontal" | "vertical" | 要显示的网格线轴向 |
#Handle
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
position | HandlePosition | 手柄位置 |
#Image
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
aspectRatio | number | 裁剪区域保持的宽高比（宽 / 高）；例如 16 / 9 会保持 16:9；未设置时，裁剪区域可自由调整尺寸 | |
cropShape | 'rectangle' | 'circle' | "rectangle" | 裁剪区域的形状 |
defaultFlip | imageCropper.FlipState | { horizontal: false, vertical: false } | 图片的初始翻转状态 |
defaultRotation | number | 0 | 图片的初始旋转角度（度） |
defaultZoom | number | 1 | 图片的初始缩放倍数 |
fixedCropArea | boolean | false | 裁剪区域是否固定尺寸和位置 |
flip | imageCropper.FlipState | 图片翻转的受控状态 | |
ids | imageCropper.ElementIds | 图片裁剪器各元素的 id | |
initialCrop | Rect | 裁剪区域的初始矩形；未设置时根据视口尺寸和宽高比计算默认值 | |
maxHeight | number | Infinity | 裁剪区域的最大高度 |
maxWidth | number | Infinity | 裁剪区域的最大宽度 |
maxZoom | number | 5 | 允许的最大缩放倍数 |
minHeight | number | 40 | 裁剪区域的最小高度 |
minWidth | number | 40 | 裁剪区域的最小宽度 |
minZoom | number | 1 | 允许的最小缩放倍数 |
nudgeStep | number | 1 | 键盘方向键每次微调的距离（像素） |
nudgeStepCtrl | number | 50 | 按住 Ctrl/Cmd 时每次微调的距离（像素） |
nudgeStepShift | number | 10 | 按住 Shift 时每次微调的距离（像素） |
rotation | number | 图片旋转的受控角度（0 - 360） | |
translations | imageCropper.IntlTranslations | 无障碍元素及其状态使用的本地化文案 | |
zoom | number | 图片缩放的受控级别 | |
zoomSensitivity | number | 2 | 双指缩放的响应灵敏度 |
zoomStep | number | 0.1 | 滚轮每步应用的缩放量 |
| 事件 | 载荷 |
|---|---|
zoomChange | details: ZoomChangeDetails |
update:zoom | zoom: number |
rotationChange | details: RotationChangeDetails |
update:rotation | rotation: number |
flipChange | details: FlipChangeDetails |
update:flip | flip: FlipState |
cropChange | details: CropChangeDetails |
update:crop | crop: Rect |
#Selection
纯造型的部件——自身没有属性，沿用部件结构的共享样式。
#Viewport
纯造型的部件——自身没有属性，沿用部件结构的共享样式。