svg画图 画不规则多边型 画箭头线

效果图：

 

话不多说直接上代码！！！

<template>
  <div class="app-container">
    <div class="my-btns">
      <div class="my-button" @click="clearDraw"> 清除画布 </div>
      <div class="my-button" @click="drawSvg"> 画区域 </div>
      <div class="my-button" @click="drawDirection"> 画方向 </div>
      <div class="my-button"  v-for="(item,index) in tmepPointCounts"
           :class="item == drawDatas[drawDatas.length-1].pointCounts?'active':''"
           @click="drawDatas[drawDatas.length-1].pointCounts = item"> {{ item }} </div>
      <div class="my-button" @click="toArray"> 转成数组 </div>
    </div>

    <div style="position:relative;" @click="divClick($event)" @mousemove="divMove($event)">
      <el-image :src="imgSrc" style="width: 750px;height:420px">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
<!--      <video id="myVideo" width="750" height="420" muted-->
<!--             controls="true" autoplay="true" loop="true" mediatype="video" crossorigin="anonymous" >-->
<!--        <source :src="videoSrc" type="video/mp4" />-->
<!--      </video>-->

      <div class="my-line-svg">
        <svg ref="mySvg" id="mySvg" width="750" height="420" version="1.1" xmlns="http://www.w3.org/2000/svg">
          <polygon :id="'drawData'+index" v-for="(item,index) in drawDatas" :key="index"
                   :points="item.clickCount == item.pointCounts ? item.myPoints:item.myMovePoints"
                   style="fill:#eff805;stroke:red;stroke-width:2;opacity:0.2"/>
          <!-- 箭头线 start -->
          <defs>
            <marker id="arrow"
                    markerUnits="strokeWidth"
                    markerWidth="12"
                    markerHeight="12"
                    viewBox="0 0 12 12"
                    refX="6"
                    refY="6"
                    orient="auto">
              <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill:#ee0606;" />
            </marker>
          </defs>
          <line v-for="(item,index) in drawDirections" :key="'line'+index"
                v-if="item.x2>0" :x1="item.x1" :y1="item.y1" :x2="item.x2" :y2="item.y2"
                stroke="red" stroke-width="2" marker-end="url(#arrow)"/>
          <!-- 箭头线 end -->
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tmepPointCounts:[3,5,7,9], // 设置画几边形
      isDrawDirectionsFlag:false, // 是否画方向 true是 false不是
      drawDatas:[ {
        firstClickY:0, // 画第一个点的坐标x
        firstClickX:0, // 画第一个点的坐标y
        secondClickY:0, // 画第二个点的坐标x
        secondClickX:0, // 画第二个点的坐标y
        clickCount:0, // 已画了几个点
        myMovePoints:'', // 画时的形状
        myPoints:'', // 画完的时形状
        pointCounts:5, // 画几边形
      } ],
      drawDirections:[], // 方向数据
      videoSrc:'https://vd4.bdstatic.com/mda-mip2p9qcv2q4hwcb/cae_h264_clips/1632450404071812791/mda-mip2p9qcv2q4hwcb.mp4?auth_key=1632464540-0-0-4f7af03614e4253d72f9e3ea8fdb652e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=',
      imgSrc:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11069770115%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636702317&t=75ec8168cef08012837e669116cd4402'
    };
  },
  mounted() {
    this.$nextTick(()=>{
      // this.pauseVideo()
    })
  },
  methods: {
    drawDirection(){
      // 画方向
      this.isDrawDirectionsFlag = true
      let drawData = {
        x1:0,
        y1:0,
        x2:0,
        y2:0,
        clickCount:0,
        angle:0
      }
      this.drawDirections.push(drawData)
      console.log("画方向数据--this.drawDirections--",this.drawDirections)
    },
    drawSvg(){
      this.isDrawDirectionsFlag = false
      let drawData =
        {
          firstClickY:0, // 画第一个点的坐标x
          firstClickX:0, // 画第一个点的坐标y
          secondClickY:0, // 画第二个点的坐标x
          secondClickX:0, // 画第二个点的坐标y
          clickCount:0, // 已画了几个点
          myMovePoints:'', // 画时的形状
          myPoints:'', // 画完的时形状
          pointCounts:5, // 画几边形
        }
      this.drawDatas.push(drawData)
      console.log("this.drawDatas--",this.drawDatas)
    },
    getAngle(x1,y1,x2,y2){
      let radian = Math.atan2(y2 - y1, x2 - x1); // 返回来的是弧度
      let angle = 180 / Math.PI * radian; // 根据弧度计算角度
      if(angle < 0) angle = 360 + angle
      this.drawDirections[this.drawDirections.length-1].angle = angle
      console.log(angle,"--角度--angle--",this.drawDirections)
    },
    toArray(){
      let myPointsArr = this.drawDatas[this.drawDatas.length-1].myPoints.split(' ');
      console.log("myPointsArr--",myPointsArr)
    },
    divMove(e){
      let x = e.offsetX
      let y = e.offsetY
      if(this.isDrawDirectionsFlag){
        if(this.drawDirections.length == 0) return
        let clickCount = this.drawDirections[this.drawDirections.length-1].clickCount
        if(clickCount == 1){
          this.drawDirections[this.drawDirections.length-1].x2 = x
          this.drawDirections[this.drawDirections.length-1].y2 = y
        }
      }else{
        if(this.drawDatas.length == 0) return
        if(this.drawDatas[this.drawDatas.length-1].clickCount >= this.drawDatas[this.drawDatas.length-1].pointCounts) return
        // console.log(this.drawDatas[this.drawDatas.length-1].clickCount,
        //     this.drawDatas[this.drawDatas.length-1].myPoints,"--移动--",e)
        this.drawDatas[this.drawDatas.length-1].myMovePoints = this.drawDatas[this.drawDatas.length-1].myPoints + x + ',' + y + ' '
      }
    },
    divClick(e){
      console.log(this.drawDatas[this.drawDatas.length-1].clickCount,"--点击--",e)
      //e.layerX e.layerY  e.offsetX e.offsetY
      let x = e.offsetX
      let y = e.offsetY
      if(this.isDrawDirectionsFlag){
        this.drawDirections[this.drawDirections.length-1].clickCount++;

        let clickCount = this.drawDirections[this.drawDirections.length-1].clickCount
        console.log(this.drawDirections.length,"--画方向--clickCount--",clickCount)


        if(clickCount==1){
          this.drawDirections[this.drawDirections.length-1].x1 = x
          this.drawDirections[this.drawDirections.length-1].y1 = y
        }else if(clickCount==2){
          this.drawDirections[this.drawDirections.length-1].x2 = x
          this.drawDirections[this.drawDirections.length-1].y2 = y
          this.getAngle(
            this.drawDirections[this.drawDirections.length-1].x1,
            this.drawDirections[this.drawDirections.length-1].y1,
            this.drawDirections[this.drawDirections.length-1].x2,
            this.drawDirections[this.drawDirections.length-1].y2)
        }

      }else{
        if(this.drawDatas[this.drawDatas.length-1].clickCount < this.drawDatas[this.drawDatas.length-1].pointCounts){
          this.drawDatas[this.drawDatas.length-1].clickCount++
          // svg （也可以画边框线的）
          this.drawDatas[this.drawDatas.length-1].myPoints += x + ',' + y
          if(this.drawDatas[this.drawDatas.length-1].clickCount < this.drawDatas[this.drawDatas.length-1].pointCounts) this.drawDatas[this.drawDatas.length-1].myPoints += ' '
          console.log("this.myPoints--",this.drawDatas[this.drawDatas.length-1].myPoints)
        }
      }
    },
    clearDraw(){
      this.drawDirections = []
      this.drawDatas = [
        {
          firstClickY:0, // 画第一个点的坐标x
          firstClickX:0, // 画第一个点的坐标y
          secondClickY:0, // 画第二个点的坐标x
          secondClickX:0, // 画第二个点的坐标y
          clickCount:0, // 已画了几个点
          myMovePoints:'', // 画时的形状
          myPoints:'', // 画完的时形状
          pointCounts:5, // 画几边形
        }
      ]
    },
    pauseVideo(){
      let video = document.getElementById("myVideo")
      console.log("进来播放")
      video.play();
      if(video.play()){
        setTimeout(()=>{
          video.currentTime=4;
          video.pause();
        },8000)
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.my-btns{
  display: flex;
}
.my-button{
  margin:10px 10px;
  width: 100px;
  text-align: center;
  padding: 10px 0;
  background-color: #00a2d4;
  color: #fcfcfc;
  border-radius: 20px;
}
.active{
  background-color: #0a7ca0;
}
.my-line{
  position: absolute;
  top: 0;
  left: 0;
}
.my-line-svg{
  position: absolute;
  top: 0;
  left: 0;
}
</style>