图像变换组件
@shihuo/image-transform-component
图像变换组件,支持图像伸缩、镜像、移动功能
API
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
src | 图像 url | 必填 | string | ||
boxWidth | 容器宽度 | number | 600 | ||
boxHeight | 容器高度 | number | 600 | ||
backgroundColor | 图片伸缩/拖拽后的底色填充 | string | #ffffff | 十六进制色值 | |
defaultEnableDrag | 默认是否允许拖拽 | boolean | false | ||
instance | 方法集 |
Dialog 模式
支持所有用法,特殊用法和说明你请看下方 API 和实际使用用例
集成@alifd/next 库的 Dialog、 Button、 Range,、NumberPicker 组件
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
min | 伸缩最小倍数 | number | 0 | 在尺寸缩放够用的情况下不建议修改 | |
max | 伸缩最大倍数 | number | 2 | 在尺寸缩放够用的情况下不建议修改 | |
step | 伸缩步长 | number | 0.001 | 每次拖动缩放 0.01 倍 | |
enableDrag | 受控的是否允许拖拽 | boolean | true | ||
onUse | 应用按钮回调函数 | function | 参数: image: 变换后的图像 base64 file: 变换后的图像文件对象 |
||
onMirror | 镜像按钮回调函数 | function | 参数: image: 变换后的图像 base64 file: 变换后的图像文件对象 |
||
onCancel | 弹窗关闭回调 | function | |||
onChangeRange | 伸缩回调 | function | 参数: value: 当前伸缩尺寸 |
||
instance | 方法集 | ||||
exportMinWidth | 导出图片的最小宽高(当前图片小于配置时,导出最小宽高配置) | number | 0 | v1.2.4支持 |
instance 方法集
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
zoom | 受控的伸缩比例 | function | 大于 0 的数字 0 ~ 1 表示图像按比例缩小 >1 表示图像按比例放大 |
||
mirror | 手动触发镜像 | function | |||
enableDrag | 开启拖拽模式 | function | |||
disableDrag | 关闭拖拽模式 | function | |||
move | 相对坐标移动 | function | 入参: x: 相对当前绘画坐标的 x 轴移动 y: 相对当前绘画坐标的 y 轴移动 |
||
export | 导出图片 base64 | ||||
exportFile | 导出图片文件对象 | ||||
reset | 重置绘图 |