# LveRectangleJs

**Repository Path**: lin_peng118/lve-rectangle-js

## Basic Information

- **Project Name**: LveRectangleJs
- **Description**: 矩形绘制 + 矩形类 + 截图导出
用于在对应dom上绘制/缩放/拖动一个矩形框，并可截图及导出
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-09-26
- **Last Updated**: 2024-08-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LveRectangleJs V1.2.2

#### 介绍
矩形绘制 + 矩形类 + 截图导出
1. v1.0.0 用于在对应dom上绘制出一个矩形框，并获取相关坐标信息及其相关操作
2. v1.1.0 快捷键操作矩形框，主动插入图片，并截图
3. v1.1.1 修复编辑bug，去除dot中关于border设置，详见更新日志
4. v1.2.0 insertImage api优化，矩形框动态生成，详见更新日志
5. v1.2.1 图像以最佳比例显示时，居中显示图像，详见更新日志
6. v1.2.2 本地上传图像等，详见更新日志

#### 使用文档

1.  类初始化
```js
const rectangle = new Rectangle('指定dom', {
  rect: {
    border: {
      width: 1
    }
  },
  events: {
    contextmenu: {
      disabled: true
    }
  }
})
```
2.  第三参数参数配置
```js
{
  /** 矩形框配置 */
  rect: {
    left: -9999,
    top: 0,
    width: 0,
    height: 0,
    border: {
      color: '#fa9120',
      width: 1
    },
    style: null
  },
  /** 矩形框周围小球配置 */
  dot: {
    width: 4,
    height: 4
  },
  /** 相关事件 */
  events: {
    contextmenu: { // 右键事件
      disabled: false // 是否禁用
    },
    draggable: { // 拖动事件
      disabled: false // 是否禁用
    },
    clip: { // 截图操作(7个快捷键功能)
      /**
       * 开始截图：alt + w
       * 保存当前截图：ctrl + s
       * 关闭当前截图：ctrl + q
       * 键盘向左方向键操作
       * 键盘向上方向键操作
       * 键盘向右方向键操作
       * 键盘向下方向键操作
       */
      disabled: false // 是否禁用
    }
  }
}
```
3. 开始截图
```js
  rectangle.startClip()
```
4. 关闭截图
```js
  rectangle.closeClip()
```
5. 深度赋值
```js
  rectangle.set('rect.border.color', '#eee')
```
6. 深度取值
```js
  rectangle.get('rect.border.color')
```
7. 事件绑定监听
```js
  rectangle.on('draging', e => {
    console.log('draging', e);
  })
```
8. 事件取消绑定
```js
  rectangle.off('draging')
```
9. 插入图片
```js
  rectangle.insertImage(url, bg?: boolean = false, mode?: string|object = 'origin | auto | {width, height}')
```
10. 上传图片
```js
  rectangle.uploadFile( bg?: boolean = false, mode?: string|object = 'origin | auto | {width, height}')
```
11. 获取截图
```js
  rectangle.getClip()
```
12. 判断是否有截图数据
```js
  rectangle.hasClip()
```
13. 快捷键使用
```bash
  * 开始截图：alt + w
  * 保存当前截图：ctrl + s
  * 关闭当前截图：ctrl + q
  * 矩形框向左移动：键盘向左方向键操作
  * 矩形框向上移动：键盘向上方向键操作
  * 矩形框向右移动：键盘向右方向键操作
  * 矩形框向下移动：键盘向下方向键操作
```
#### 后续开发计划

1. 输出矩形框截图(v1.1.0开发完成)
2. 主动插入图片并截图控制(v1.1.0开发完成)
3. 矩形框内部canvas绘制
4. canvas涂鸦记录
5. dotNum小球数量未完善(取消开发)
6. 作为背景图插入并截图控制
7. 图片以最佳比例自适应显示(v1.2.0开发完成)
8. 去除内部rect传参，改写为动态js生成截图框(v1.2.0开发完成)
9. 图像以最佳比例显示时，居中显示图像(v1.2.1开发完成)
10. 用户本地上传图像或者传入图像url(v1.2.2开发完成)
11. 针对多个层级下的getBoundingClientRect相关的优化(v1.2.5等待开发)

#### 参与贡献

1.  林大大哟(https://gitee.com/lin_peng118)


#### 更新日志

20240219 v1.1.1
1. 去除 dot里 关于border的相关设置
2. 修改editMouse 拉伸内部相关bug
3. 优化 矩形框 dot样式
4. 解决浏览器窗口改变导致的绘制误差bug

20240724 v1.2.0
1. 主动插入的图片新增最佳比例自适应显示的模式
2. insertImage api第二参数改传参为 origin | auto | {width, height}，默认为auto
3. 初始化类时，去除第二参数，改写为动态js生成第二参数的截图矩形框
4. insertImage插入图片时，会重置掉以前的图片和截图矩形框

20240725
1. 修复已存在的矩形框重复点击生成

20240727 v1.2.1
1. 图像以最佳比例显示时，居中显示图像
2. 拖拽方向逻辑提取

20240802 v1.2.2
1. 本地上传图像
2. 截图操作栏/图片操作栏 界面修改
3. 增加无截图时异常提示