在WasmPlayer上添加矩形区域绘制功能

WasmPlayer上添加矩形区域绘制功能主要用在视频报警区域设置功能中。这里采用了canvas的矩形绘制功能来实现。
主要的难点在于将canvas叠加到WasmPlayer播放器上方，主要涉及到css设置（不熟），

WasmPlayer播放器代码

在vue中新建play.vue项目，内容如下：

<template>
  <div class="Playerbox_div">
    <div id="Player"></div>
  </div>
</template>

<script>
import WasmPlayer from "@easydarwin/easywasmplayer";
export default {
  data() {
    return {
      player: null,
      url: "",
    };
  },
  mounted() {
    // 实例化播放器
    this.player = new WasmPlayer(null, "Player", this.callbackfun,{cbUserPtr:this, decodeType:"auto", openAudio:1, BigPlay:false, Height:true})
  },
  methods: {

    play_video() {
      // 调用播放
      this.player.play(this.url, 1);
    },
    callbackfun(e) {
      console.log("callbackfun", e);
    },
  },
};
</script>
<style scoped>
.Playerbox_div {
  width:100%;
  height:100%;
}
</style>

WasmPlayer的引用等可参考vue及H5中使用easywasmplayer H265播放器

添加视频区域绘制工具

在vue项目中新建一个region_set.vue，绘制上图画面。

<template>
  <div class="region-set_body">
    <!-- 区域报警中划线或区域 -->
    <div class="canvas-container">
      <div class="canvas-content">
        <canvas
          class="canvas-item-region"
          id="canvas-region"
          :width="canvasWidth"
          :height="canvasHeight"
          @mousedown="canvasDown($event)"
          @mouseup="canvasUp($event)"
          @mousemove="canvasMove($event)"
        >
        </canvas>
        <playerRegion></playerRegion>
      </div>
    </div>
    <div class="region-set_toolbar">
      <el-button
        type="text"
        icon="el-icon-edit"
        size="small"
        @click="draw_region"
        v-if="button_clicked == false"
        >绘制区域</el-button
      >
      <el-button
        type="text"
        icon="el-icon-edit"
        size="small"
        @click="draw_region"
        v-else
        >停止绘制</el-button
      >
      <el-button
        type="text"
        icon="el-icon-close"
        size="small"
        @click="clear_region"
        >清除</el-button
      >
    </div>
    <div>
      <el-button type="primary" size="mini" @click="save_draw_region"
        >保存</el-button>
    </div>
  </div>
</template>

<script>
//导入视频播放控件和在控件上方使用canvas进行区域、划线操作部分
import playerRegion from "./player";
export default {
  components: { playerRegion },
  name: "regionSet",
  mounted() {
    const canvas = document.querySelector("#canvas-region");
    this.context = canvas.getContext("2d");
  },
  methods: {
    //清除界面中绘制的区域
    clear_region() {
      this.$confirm("删除绘制区域？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //清除canvas画布上的图形
        this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        //弹出操作成功的提示消息
        this.$message({
          type: "success",
          message: "删除成功！",
        });
      });
    },

    //绘制区域
    draw_region() {
      //改变按钮显示字体
      this.button_clicked = !this.button_clicked;
      if (this.button_clicked) {
        //绘制图形
        this.initCanvas();
      }
    },
    //初始化canvas画板
    initCanvas() {
      this.context.lineWidth = 2;
      this.context.strokeStyle = this.lineColor;
      // const canvas = document.querySelector("#canvas");
    },
    //鼠标按下点击
    canvasDown(e) {
      if (this.button_clicked) {
        this.moving = true;
        const { target } = e;
        const canvasX = e.offsetX;
        const canvasY = e.offsetY;

        //初始位置赋值给全局变量
        this.rectPos.x = canvasX;
        this.rectPos.y = canvasY;
      }
    },

    //鼠标移动
    canvasMove(e) {
      if (this.moving && this.button_clicked) {
        const canvasX = e.offsetX;
        const canvasY = e.offsetY;
        //获取初始位置点
        const { x, y } = this.rectPos;
        let nx = Math.ceil(canvasX - x);
        let ny = Math.ceil(canvasY - y);

        //每次绘制矩形之前都先清除之前的绘制图形
        this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.context.strokeRect(x, y, nx, ny);
      }
    },

    //鼠标弹起
    canvasUp(e) {
      if (this.moving && this.button_clicked) {
        this.moving = false;
        const { target } = e;
        const canvasX = e.offsetX;
        const canvasY = e.offsetY;

        const { x, y } = this.rectPos;
        let nx = Math.ceil(canvasX - x);
        let ny = Math.ceil(canvasY - y);
        //每次绘制矩形之前都先清除之前的绘制图形
        this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
        this.context.strokeRect(x, y, nx, ny);

        this.context.closePath();
      }
    },

    //改变绘制区域线条颜色
    changeColor() {
      this.context.strokeStyle = this.lineColor;
    },
    //保存绘制的区域或者直线
    save_draw_region() {
      //如果“保存”之前，未点击“停止绘制”，则在此进行恢复
      this.button_clicked = false;
      if (this.moving) {
        this.moving = false;
      }

      this.$message({
        type: "success",
        message: "保存成功！",
      });
    },
  },
  data() {
    return {
      context: {},
      //绘制区域按钮显示字体是否变化
      button_clicked: false,
      canvasWidth: 600,
      canvasHeight: 370,
      //鼠标是否在移动中
      moving: false,
      //鼠标数据点的保存
      rectPos: {
        x: 0,
        y: 0,
      },
      //绘图线条颜色设置
      lineColor: "#ee0606",
    };
  },
};
</script>

<style scoped>
.region-set_body {
  width: 100%;
  height: 600px;
  margin-top: 1rem;
}
.canvas-container {
  position: relative;
  width:600px;
  height:400px;
}
.canvas-content {
  width: 600px;
  height: 400px;
}

.canvas-item-region {
  border: 1px solid;
  border-block-color: rgb(157, 235, 235);
  float: left;
  position: absolute;
  z-index: 1;
}
.region-set_toolbar {
  margin-bottom: 5px;
}
</style>

css也不太熟悉，这里的css可能也有不需要的。