4.6.201910261148 • Published 5 years ago
@dfeidao/fd-wh000021 v4.6.201910261148
控件
https://dfeidao.gitee.io/widgets/
安装
yarn add --dev @dfeidao/fd-wh000021属性说明
| 名字 | 说明 |
|---|---|
| aspect-ratio | 锁定裁剪框的长宽比,计算方法为宽/高,如宽为16,高为9,该参数值应为16除以9的值,即1.78,该参数不传默认为图片的比例,且可以使用鼠标进行调整.如果设定该属性,则用户在使用时宽高比例即锁定为设定的比例 |
| src | 图片地址 |
| width | 容器宽度,也可以通过style设置 |
| height | 容器高度,也可以通过style设置 |
方法说明
zoom()
对背景图片的缩放
enable()
启用裁剪框
disable()
禁用裁剪框
clear()
清除裁剪框
crop()
展示裁剪框
reset()
将图像和裁切框重置为其初始状态
destroy()
摧毁裁剪器
move()
设置背景图片移动
参数
| 参数名 | 参数类型 | 参数说明 |
|---|---|---|
| offset_x | number | 横向的位置 |
rotate()
让背景图片旋转
参数
| 参数名 | 参数类型 | 参数说明 |
|---|---|---|
| degree | number | 旋转角度,顺时针:要求为正数(degree > 0),逆时针:要求为负数(degree < 0) |
scale_x()
设置横向缩放比例
参数
| 参数名 | 参数类型 | 参数说明 |
|---|---|---|
| scale_x | number | 横向比例(要求为整数) |
scale_x()
设置横向缩放比例
参数
| 参数名 | 参数类型 | 参数说明 |
|---|---|---|
| scale_y | number | 纵向比例(要求为整数) |
get_data()
获取裁剪框(基于背景图片的)区域位置和尺寸数据
参数
| 参数名 | 参数类型 | 参数说明 |
|---|---|---|
| rounded | boolean | 返回数据是否四舍五入,默认为false |
返回值
- x:裁剪区域的横向偏移
- y:裁剪区域的纵向偏移
- width:裁剪区域的宽度
- height:裁剪区域的高度
- rotate:背景图片的旋转角度
- scaleX:背景图片的横向比例
- scaleY:背景图片的纵向比例
set_data()
设置裁剪框(基于背景图片的)区域位置和尺寸数据
参数
详细可以看get_data方法的返回值
get_image_data()
获取裁剪框(基于背景图片的)区域位置和尺寸数据
返回值
- left:容器的横向偏移
- top:容器的纵向偏移
- width:背景的宽度
- height:背景的高度
- naturalWidth:背景图像的自然宽度
- naturalHeight:背景图像的自然高度
- aspectRatio:背景图像的比例
- rotate:背景图像的旋转角度
- scaleX:横坐标的缩放比例
- scaleY:纵坐标的缩放比例
get_canvas_data()
获取图像(基于容器的)区域位置和尺寸数据
返回值
- left:背景图像基于容器的横向偏移
- top:背景图像基于容器的纵向偏移
- width:画布的宽度
- height:画布的高度
- naturalWidth:画布的自然宽度(只读)
- naturalHeight:画布的自然高度(只读)
set_canvas_data()
设置图像(基于容器的)区域位置和尺寸数据
参数
详细可以看get_canvas_data方法的返回值
get_crop_box_data()
获取裁剪框的位置和尺寸数据
返回值
- left:裁剪框的横向偏移
- top:裁剪框的纵向偏移
- width:裁剪框的宽度
- height:裁剪框的高度
set_crop_box_data()
设置裁剪框的位置和尺寸数据
参数
详细可以看get_canvas_data方法的返回值
get_cropped_canvas()
获取裁剪的图像
参数
- width:返回的canvas节点的宽度
- height:返回的canvas节点的高度度
- minWidth:返回的canvas节点最小目标宽度,默认值为0
- minHeight:返回的canvas节点最小目标高度,默认值为0
- maxWidth:返回的canvas节点最大目标宽度,默认值为Infinity
- maxHeight:返回的canvas节点最大目标高度,默认值为Infinity
- fillColor:一种颜色,用于填充输出画布中的所有alpha值,默认值为transparent
- imageSmoothingEnabled:设置为更改图像是否平滑(默认为true)
- imageSmoothingQuality:设置图像平滑的质量,'low' | 'medium' | 'high',默认为low
返回值
返回一个canvas节点
事件
裁剪框移动事件
fdwe-crop-move
图片缩放事件
fdwe-zoom
容器改变事件
fdwe-crop-change
示例
<fd-wh000021 style="width:800px;height: 500px;" src='https://gw.alicdn.com/tfs/TB1ayl9mpYqK1RjSZLeXXbXppXa-170-62.png'>
</fd-wh000021>自定义按钮
<fd-wh000021 style="width:800px;height: 500px;" src='https://gw.alicdn.com/tfs/TB1ayl9mpYqK1RjSZLeXXbXppXa-170-62.png'>
<input slot='zoom_add' type='button' value='放大' />
<input slot='zoom_sub' type='button' value='缩小' />
<input slot='top' type='button' value='向上移动' />
<input slot='down' type='button' value='向下移动' />
<input slot='left' type='button' value='向左移动' />
<input slot='right' type='button' value='向右移动' />
<input slot='rotate_cw' type='button' value='旋转' />
<input slot='mirrorX' type='button' value='横向镜像' />
<input slot='mirrorY' type='button' value='纵向镜像' />
<input slot='crop_box' type='button' value='创建裁剪框' />
<input slot='clear' type='button' value='清除裁剪框' />
<input slot='enable' type='button' value='启用' />
<input slot='disable' type='button' value='禁用' />
<input slot='reset' type='button' value='重置' />
</fd-wh000021>4.6.201910261148
5 years ago