手写视频裁剪框

     <!-- 截取框 -->
                <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

  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);
    },