canvas中实现视频标注

 

<template>
  <div
    class="info-container-1"
    :class="theme ? 'info-container-1' : 'info-container-2'"
  >
    <el-row class="row">
      <!-- 左侧视频 -->
      <div>
        <el-col :span="18" class="left-wrapper">
          <el-card
            body-style="margin: 0 auto"
            class="card img-container image-polygon-mark"
            shadow="hover"
          >
          <!-- vue鼠标右击事件@contextmenu.prevent需求：阻止浏览器默认事件，添加自定义事件 -->
            <div class="image-mark">
              <div class="inner" @contextmenu.prevent="mouseEnd">
                <!-- 视频 -->
                <div class="home-center-bg" style="width: 1300px; height: 100%">
                  <video
                    id="videoElement"
                    controls
                    autoplay
                    muted
                    style="width: 1300px; height: 100%"
                  ></video>
                </div>
                  <!-- 右击实现标注闭合和清楚 -->
                <div
                  class="end-handler"
                  ref="endHandler"
                  @mouseleave="$refs.endHandler.style.display = 'none'"
                >
                  <span @click="closeLine">闭合</span>
                  <span @click="clearLine">清除</span>
                  <!--添加新标点存在问题，无法确定新增点位与连接位置-->
                  <!--<span @click="addPoint">添加</span>-->
                </div>
                <!--                :width="w" :height="h"-->
                <div class="float">
                  <!-- canvas -->
                  <canvas
                    ref="cvs"
                    height="650"
                    width="1200"
                    @click="clickCvs"
                  />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <!-- 右侧 -->
        <el-col :span="6" class="right">
          <!-- 监控区域标定 -->
          <el-card class="card handle-wrapper" shadow="hover">
            <div class="right-conter-title">监控区域标定</div>
            <el-form :model="formData" class="demo-form-inline">
              <el-form-item label="选择场景" label-width="80px" prop="">
                <el-select
                  v-model="formData.modelId"
                  placeholder="请选择算法场景"
                  disabled
                >
                  <el-option
                    v-for="dict in equipmentChannelList"
                    :key="dict.id"
                    :label="dict.modelInfo"
                    :value="dict.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="right-conter-button">
              <el-button @click="add" type="primary" size="mini" class="add"
                >添加</el-button
              >
              <el-button @click="save" type="success" size="mini" class="save"
                >保存</el-button
              >
            </div>
            <!-- 标定表格编辑部分 -->
            <div class="table-top">
              <el-table
                :data="tableData"
                height="24vh"
                :row-class-name="TableRowClassName"
                style="width: 100%; margin-top: 15px"
              >
                <el-table-column prop="type" label="类型" align="center">
                </el-table-column>
                <el-table-column label="标注区域" align="center">
                  <template slot-scope="scope">
                    <div
                      :title="JSON.stringify(scope.row.drawDetail)"
                      style="
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                      "
                    >
                      {{ JSON.stringify(scope.row.drawDetail) }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

 watch: {
    pointsList(n) {
      const cvs = this.$refs.cvs;
      const ctx = cvs.getContext("2d");
      ctx.clearRect(0, 0, this.w, this.h); //清空指定矩形区域内的绘图
      const length = this.pointsList.length;
      if (n.length > 0) {
        this.pointsList.forEach((item, index) => {
          if (index < length && index > 0) {
            let startPoint = {
              x: this.pointsList[index - 1].x,
              y: this.pointsList[index - 1].y,
            };
            this.drawLineBetweenPoints(startPoint, { x: item.x, y: item.y });
          }
          this.drawPoints(item.x, item.y);
        });
      }
    },
  },
  mounted() {
    this.w = this.$refs.cvs.offsetWidth;
    this.h = this.$refs.cvs.offsetHeight;
    getConfigKey("liveNVR").then((res) => {
      this.liveUrl = res.msg;
    });
    this.handleGetCameraInfo();
  },
  methods: {
    // 播放视频流
    play() {
      this.flvPlayer.play();
    },
    arrCamera(row, col) {
      return this.cameraArray[
        (parseInt(row) - 1) * this.rowLength + parseInt(col)
      ];
    },
    //查询摄像仪信息接口部分
    handleGetCameraInfo() {
      getCameraInfo(this.$route.query.cameraId)
        .then((response) => {
          this.tableData = [];
          this.formData = response.data;
          if (this.formData.drawDetail !== null) {
            this.tableData.push({ drawDetail: this.formData.drawDetail });
          }
          listEquipmentChannel({ equipmentId: this.formData.equipmentId }).then(
            (response) => {
              this.equipmentChannelList = response.rows;
            }
          );
        })
        .finally(() => {
          if (flvjs.isSupported()) {
            let videoElement = document.getElementById("videoElement");
            this.flvPlayer = flvjs.createPlayer({
              type: "flv",
              isLive: true,
              hasAudio: false,
              // url: 'http://192.168.10.197:8081/live/video.flv'  // 自己的flv视频流
              url: this.liveUrl + this.formData.channelNo + ".flv", // 自己的flv视频流
            });
            this.flvPlayer.attachMediaElement(videoElement);
            this.flvPlayer.load();
            this.flvPlayer.play();
          }
        });
    },

  
    // 添加
    add() {
      this.tableData.push({ index: this.tableData.length + 1, drawDetail: [] });
      // 建议添加后，返回data更新列表数据
    },
    // 提交请求保存
    save() {
      if (this.currentArea !== undefined) {
        // 此处请求保存标注区域（在清除缓存前操作保存数据请求）
        this.tableData[this.currentArea].drawDetail = JSON.stringify(
          this.pointsList
        );
        this.clearLine();
        this.currentArea = undefined;
        this.formData.drawDetail = this.tableData[0].drawDetail;
        updateCameraInfo(this.formData).then((response) => {
          this.msgSuccess("操作成功");
          this.handleGetCameraInfo();
        });
      
      } else {
        this.$notify({
          title: "警告",
          message: "请选择标注区域进行修改",
          type: "error",
        });
      }
    },
   
    /** 修改按钮操作 */
    handleUpdate() {
      const cameraId = parseInt(this.$route.query.cameraId);
      getPushInfoByCameraId(cameraId).then((response) => {
        this.picPath = process.env.VUE_APP_BASE_API + response.data.picPath;
        this.formData = response.data;
        this.tableData = this.formData.sealDrawDetailList;
        console.dir(this.$refs.cvs);
        this.$refs.cvs.onload = () => {
          this.w = this.$refs.cvs.offsetWidth;
          this.h = this.$refs.cvs.offsetHeight;
        };
      });
    },
    
    // 删除
    handleDelete(e) {
      this.clearLine();
      this.tableData.splice(e, 1);
      updateCameraInfoDrawDetail(this.formData.id).then((response) => {
        this.msgSuccess("操作成功");
        this.handleGetCameraInfo();
      });
    },
    // 编辑进行视频标注
    handleEdit(e) {
      this.currentArea = e;
      this.clearLine();
      this.pointsList = this.tableData[e].drawDetail;
      window.sessionStorage.setItem("pointsList", this.pointsList);
      this.initStorage();
    },
    pointActive(point, color = "rgba(255,6,44,0.86)") {
      // this.drawPoints(point.x,point.y,color,6,4)
      this.drawPoints(point.x, point.y, color, 4, 5);
    },
    pointUnActive(point) {
      this.drawPoints(point.x, point.y);
    },
    // 绘制点线图
    drawLineBetweenPoints(startPoint, endPoint) {
      const cvs = this.$refs.cvs; //获取实列
      const ctx = cvs.getContext("2d");
      ctx.beginPath(); //开始当前路径
      ctx.moveTo(startPoint.x, startPoint.y); //路径移动到画布中的指定点，不创建线条
      ctx.lineTo(endPoint.x, endPoint.y); //添加一个新点
      ctx.strokeStyle = "#0096ff"; //线条的颜色
      ctx.stroke(); //绘制
      this.drawPoints(startPoint.x, startPoint.y);
    },
    // 绘制弧形图形
    drawPoints(x, y, color = "#0096ff", lineWidth = 2, r = 6) {
      const cvs = this.$refs.cvs;
      const ctx = cvs.getContext("2d");
      ctx.beginPath(); //开始当前路径
      ctx.arc(x, y, r, 0, 2 * Math.PI); //绘制圆弧
      ctx.fillStyle = "white"; //颜色填充
      ctx.fill(); //填充当前绘图
      ctx.lineWidth = lineWidth; //线条的宽度
      ctx.strokeStyle = color; //线条的颜色
      ctx.stroke(); //绘制完成
    },
    // 储存绘制路径
    initStorage() {
      const storage = window.sessionStorage;
      if (storage.getItem("pointsList") === null) {
        storage.setItem("pointsList", []);
      } else {
        this.pointsList = JSON.parse(storage.getItem("pointsList"));
      }
    },
    // canvas点击事件
    clickCvs(e) {
      if (this.currentArea !== undefined) {
        const { offsetX, offsetY } = e;

        this.pointsList.push({ x: offsetX, y: offsetY });
        this.setThisPointListStorage();
      } else {
        this.$notify({
          title: "警告",
          message: "请选择对应区域进行编辑",
          type: "error",
        });
      }
    },

    setThisPointListStorage() {
      const storage = window.sessionStorage;
      storage.setItem("pointsList", JSON.stringify(this.pointsList));
    },

    deletePoint(i) {
      this.pointsList.splice(i, 1);
      this.setThisPointListStorage();
    },
    // 鼠标右击事件 闭合、清除
    mouseEnd(e) {
      let endHandler = this.$refs.endHandler;
      endHandler.style.display = "block";
      endHandler.style.top = `${e.offsetY - 4}px`;
      endHandler.style.left = `${e.offsetX - 4}px`;
    },

    // 鼠标右击视频标定右键闭合
    closeLine() {
      if (this.pointsList.length > 0) {
        this.pointsList.push(this.pointsList[0]);
        this.setThisPointListStorage();
        this.$refs.endHandler.style.display = "none";
      }
    },
    // 鼠标右击视频标定右键清除
    clearLine() {
      this.pointsList = [];
      this.setThisPointListStorage();
      this.$refs.endHandler.style.display = "none";
    },
  
  },