手写视频裁剪框

javascript 复制代码
     <!-- 截取框 -->
                <div
                  v-show="isShow"
                  class="crop-box"
                  :style="{
                    width: cropWidth + 'px',
                    height: cropHeight + 'px',
                    left: cropX + 'px',
                    top: cropY + 'px',
                  }"
                  ref="cropBox"
                  @mousedown="startInteraction"
                >
                  <!-- 内容在这里 -->
                  <div class="crop-box-content"></div>
                  <div
                    @mousedown="dd"
                    data-v-23936b6b=""
                    data-action="se"
                    class="east-south-side"
                  ></div>
                </div>

js

javascript 复制代码
  startInteraction(e) {
      const box = this.$refs.cropBox;
      const boxRect = box.getBoundingClientRect();
      const mouseX = e.clientX - boxRect.left;
      const mouseY = e.clientY - boxRect.top;

      if (mouseX <= this.resizeHandleSize && mouseY <= this.resizeHandleSize) {
        this.resizeDirection = "tl";
      } else if (
        mouseX >= boxRect.width - this.resizeHandleSize &&
        mouseY <= this.resizeHandleSize
      ) {
        this.resizeDirection = "tr";
      } else if (
        mouseX >= boxRect.width - this.resizeHandleSize - 20 &&
        mouseY >= boxRect.height - this.resizeHandleSize - 20
      ) {
        this.resizeDirection = "br";
      } else if (
        mouseX <= this.resizeHandleSize &&
        mouseY >= boxRect.height - this.resizeHandleSize
      ) {
        this.resizeDirection = "bl";
      } else {
        this.resizeDirection = null;
        this.startDragging(e);
        return;
      }

      this.startX = e.clientX;
      this.startY = e.clientY;
      this.startWidth = this.cropWidth;
      this.startHeight = this.cropHeight;
      this.startCropX = this.cropX;
      this.startCropY = this.cropY;
      this.isResizing = true;

      document.addEventListener("mousemove", this.handleResize);
      document.addEventListener("mouseup", this.stopInteraction);
    },
    startDragging(e) {
      this.startX = e.clientX;
      this.startY = e.clientY;
      this.startCropX = this.cropX;
      this.startCropY = this.cropY;
      this.isDragging = true;

      document.addEventListener("mousemove", this.handleDrag);
      document.addEventListener("mouseup", this.stopInteraction);
    },
    handleResize(e) {
      if (this.isResizing) {
        const deltaX = e.clientX - this.startX;
        const deltaY = e.clientY - this.startY;
        let newWidth, newHeight;

        switch (this.resizeDirection) {
          case "tl":
            return;
            newWidth = this.startWidth - deltaX;
            newHeight = this.calculateHeight(newWidth);
            this.cropX = this.startCropX + deltaX;
            this.cropY = this.startCropY + deltaY;
            break;
          case "tr":
            return;

            newWidth = this.startWidth + deltaX;
            newHeight = this.calculateHeight(newWidth);
            this.cropY = this.startCropY + deltaY;
            break;
          case "br":
            newWidth = this.startWidth + deltaX;
            // newHeight = this.calculateHeight(newWidth);
            newHeight = (newWidth * 16) / 9;
            break;
          case "bl":
            return;

            newWidth = this.startWidth - deltaX;
            newHeight = this.calculateHeight(newWidth);
            this.cropX = this.startCropX + deltaX;
            break;
          default:
            break;
        }

        this.cropWidth = Math.max(newWidth, 50); // 最小宽度
        this.cropHeight = Math.max(newHeight, 50); // 最小高度

        // 检查是否超出父容器范围
        const cropper = this.$refs.videoAndCropper;
        // console.log(
        // "🚀 ~ file: index02.vue:1687 ~ handleResize ~ cropper:",
        // cropper.offsetHeight
        // );
        const parentRect = this.$el.getBoundingClientRect();
        // // console.log("🚀 ~ file: index02.vue:1687 ~ handleResize ~ parentRect:", parentRect)

        if (this.cropY + this.cropHeight > cropper.offsetHeight) {
          this.cropHeight = cropper.offsetHeight;
        }

        if (this.cropHeight == cropper.offsetHeight) {
          this.cropWidth = (this.cropHeight / 16) * 9;
        }

        //  if (this.cropX + this.cropWidth > parentRect.width) {
        //   this.cropWidth = parentRect.width - this.cropX;
        // }
      }
    },

   handleDrag(e) {
      // 通过$refs获取元素引用
      const element = this.$refs.videoAndCropper;

      // 获取元素的高度和宽度
      const height = element.clientHeight; // 获取元素内部高度,包括内边距,不包括边框
      const width = element.clientWidth; // 获取元素内部宽度,包括内边距,不包括边框

      if (this.isDragging) {
        const deltaX = e.clientX - this.startX;
        const deltaY = e.clientY - this.startY;

        // 计算新的位置
        const newCropX = this.startCropX + deltaX;
        const newCropY = this.startCropY + deltaY;
        // console.log(
        // "🚀 ~ file: index02.vue:1677 ~ handleDrag ~ newCropY:",
        // newCropY + this.cropHeight
        // );
        // 检查是否超出父容器范围
        const parentRect = this.$el.getBoundingClientRect();
        // console.log(
        // "🚀 ~ file: index02.vue:1651 ~ handleResize ~ parentRect:",
        // parentRect
        // );
        // console.log(
        // "🚀 ~ file: index02.vue:1694 ~ handleDrag ~ height:",
        // height
        // );

        if (newCropX >= 0 && newCropX + this.cropWidth <= parentRect.width) {
          this.cropX = newCropX;
        }
        if (newCropY >= 0 && newCropY + this.cropHeight <= parentRect.height) {
          this.cropY = newCropY;
        }

        //    if (newCropY + this.cropHeight >= height) {
        //     console.log(3333);
        //   return;
        // }

        if (newCropX + this.cropWidth >= width) {
          this.cropX = width - this.cropWidth;
        }

        if (newCropY + this.cropHeight >= height) {
          this.cropY = height - this.cropHeight;
        }
      }
    },
    stopInteraction() {
      this.isResizing = false;
      this.isDragging = false;
      this.resizeDirection = null;
      document.removeEventListener("mousemove", this.handleResize);
      document.removeEventListener("mousemove", this.handleDrag);
      document.removeEventListener("mouseup", this.stopInteraction);
    },
相关推荐
寻找华年的锦瑟1 分钟前
Qt-配置文件(INI/JSON/XML)
开发语言·qt
HY小海12 分钟前
【C++】AVL树实现
开发语言·数据结构·c++
Light6014 分钟前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
workflower15 分钟前
Fundamentals of Architectural Styles and patterns
开发语言·算法·django·bug·结对编程
Roc-xb18 分钟前
ModuleNotFoundError: No module named ‘conda_token‘
开发语言·python·conda
人工干智能1 小时前
Python 开发中:`.ipynb`(Jupyter Notebook 文件)和 `.py`(Python 脚本文件)
开发语言·python·jupyter
爱生活的苏苏1 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
Jay-juice1 小时前
QT信号与槽
开发语言·qt
fs哆哆1 小时前
在VB.NET中,有没有 ?.这个运算符
java·开发语言·.net
驰羽1 小时前
[GO]什么是热重载,如何使用Air工具
开发语言·后端·golang