svg 画线

最近接触了一个给直播视频画线的需求，第一个想到的是用 canvas 实现，但是 canvas 好像添加position 还是不会跟视频重叠，依旧是上下分布，所以用了 svg 标签

1. 首先创建 svg 画布

先写一个 svg 区域

<template>
  <svg class="svg-container"></svg>
</template>

<style lang="less" scoped>
.svg-container {
  width: 1200px;
  height: 550px;
  border: 1px solid red;
}
</style>

2. 画一条直线

<template>
  <svg class="svg-container">
    <line
      x1="10"
      y1="10"
      x2="200"
      y2="230"
      style="stroke: #c00; stroke-width: 3px"
    ></line>
  </svg>
</template>

stroke 线的颜色， stroke-width 线的宽度

3. 动态绘制线条 把 line 标签的x1 y1 x2 y2 换成动态设置的就好了 添加 鼠标按下事件 mousedown 监听起始位置，松开事件监听终止位置

<template>
  <svg class="svg-container" @mousedown="mousedown">
    <line
      v-show="endP[0]"
      :x1="startP[0]"
      :y1="startP[1]"
      :x2="endP[0]"
      :y2="endP[1]"
      style="stroke: #c00; stroke-width: 3px"
    ></line>
  </svg>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const startP = ref<any>([])
const endP = ref<any>([])

const mousedown = (e: any) => {
  startP.value = [e.pageX, e.pageY]
  window.addEventListener('mousemove', mousemove)
  window.addEventListener('mouseup', mouseup)
}

const mousemove = (e: any) => {
  endP.value = [e.pageX, e.pageY]
}

const mouseup = () => {
  window.removeEventListener('mousemove', mousemove)
  window.removeEventListener('mouseup', mouseup)
}
</script>

这样就可以随便画直线了

v-show="endP[0]" 是防止第一次鼠标按下时 按下的点跟0，0点连线

其余的 圆circle 椭圆ellipse 多线条polyline 多边形polygon 以及path等标签 感兴趣的自行研究