html 跟随鼠标移动画正方形_html鼠标画矩形-CSDN博客

本文链接：https://blog.csdn.net/qq_43901960/article/details/135508085

本文介绍了如何使用JavaScript在视频上实现动态批注功能，包括鼠标按下获取初始位置、鼠标移动实时调整批注框大小、鼠标离开检查是否超出范围以及鼠标抬起时获取批注区域并关联视频时间点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：给视频 video 添加批注
在这里插入图片描述

思路：
一、鼠标按下

e.offsetX，e.offsetY：返回的是元素距离带有定位的父元素的位置只有IE作用，所以不使用
记录鼠标按下起点坐标距离页面左侧和上侧距离
计算目标div 距离页面左侧和上侧距离
用 2的距离 - 3的距离，得到当前所画图形距离目标div的left和top
创建一个新的div 定义样式宽高0，top,left，边框，层级
将新创建的div 添加在目标div上

二、鼠标离开
8. 提示超出范围了

三、鼠标移动
9. 动态渲染宽高
鼠标当前的坐标 - 鼠标起始点坐标，得到宽高

四、鼠标抬起
获取到所画正方形宽高，let,top 除以宽高得到比例，放大缩小不影响位置
获取当前video的播放时间

代码实现：

  // 鼠标按下
  public moveMouseDown = (e:MouseEvent) => {
    if (this.state.enterFlag  ) {
      return;
    }
    const $areaP = document.querySelector('#video-container')
    let startPoint = {
      startX: e.clientX,
      startY: e.clientY
    }
    const coord = {
      left: e.clientX - $areaP!.offsetLeft,
      top: e.clientY - $areaP!.offsetTop,
    };

    this.setState({
        startPoint: startPoint,
        enterFlag:true
    })
    this.$area = document.createElement('div');
    this.$area.className = 'area';
    this.$area.style.position = 'absolute';
    this.$area.style.top = coord.top + 'px';
    this.$area.style.left = coord.left + 'px';
    this.$area.style.border = '1px solid #2e8ce2';
    this.$area.style.width = '0';
    this.$area.style.height = '0';
    this.$area.style.zIndex = '9';
    $areaP!.appendChild(this.$area)    
  };
  // 鼠标离开
  public moveMouseLeaveHandler = (e) => {
    if ( this.state.enterFlag) {
        message.warn('请在图片区域内画图');
    }
  };
  // 鼠标移动
  public moveMouseMoveHandler = (e) => {
    if (this.state.annoAble && this.$area && e.button == 0) {
        this.$area!.style.width = e.clientX - this.state.startPoint.startX + 'px';
        this.$area!.style.height = e.clientY - this.state.startPoint.startY+ 'px';
    }
  };
  // 视频批注鼠标抬起
  public moveMouseUpHandler = (e) => {
    const $areaP = document.querySelector('#video-container')
    var video = document.getElementById("video_souce");
    var timePoint = Math.floor(video.currentTime).toString();
    
    this.setState({
        enterFlag: false,
    }) 
    let point = {
        x: this.$area.offsetLeft/$areaP.offsetWidth,
        y: this.$area.offsetTop/$areaP.offsetHeight,
        w: this.$area.offsetWidth/$areaP.offsetWidth,
        h: this.$area.offsetHeight/$areaP.offsetHeight,
        timePoint:timePoint //视频批注的秒数
    }

    if (point.x == 0 || point.y == 0 || point.w == 0 || point.h == 0  || e.clientX - this.state.startPoint!.startX < 0 || e.clientY - this.state.startPoint!.startY < 0) {
        message.warn('请选择一块区域');
        $areaP!.removeChild(this.$area)
        this.$area = null;
        return;
    }
    this.$area = null;
  };