Try drawer Querstion

PictureInSvg.vue

<template>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    :width="`${svgWidth}px`"
    :height="`${svgHeight}px`"
    :viewBox="viewBox"
    @click.stop="drawClick">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g>
        <image
          :x="imageX"
          :y="imageY"
          :width="imageWidth"
          :height="imageHeight"
          :xlink:href="image.src"></image>
      </g>

      <g v-if="displayLines" :transform="groupTranslate">
        <line-with-dots :color="color" :coords="lines.a" />
        <line-with-dots :color="color" :coords="lines.b" />
      </g>

      <text font-family="Roboto-Medium, Roboto" font-size="13" font-weight="400" line-spacing="12"
        v-if="displayLines && displayText"
        :fill="color">
        <tspan :x="maxY + 6" :y="minY + 2">{{text()}}</tspan>
      </text>

      <g v-if="displayLines && displayCircle" stroke="#FB355D" stroke-width="2">
        <circle :cx="minX + lineAreaX * 0.5" :cy="minY + lineAreaY * 0.5" :r="lineAreaY"/>
      </g>

      <!-- <g :transform="groupTranslate"> -->
      <g>
        <line-with-dots
          v-for="(line, index) in draw.lines"
          :key="index"
          :color="color"
          :coords="line" />
      </g>
      <rect x="0" y="0" :width="svgWidth" :height="svgHeight" fill="none"></rect>
    </g>
  </svg>
</template>

<script>
import { mapValues } from 'lodash'
import LineWithDots from './LineWithDots'

export default {
  name: 'PictureInSvg',
  components: { LineWithDots },
  methods: {
    drawClick (event) {
      const { layerX, layerY, clientX, clientY, offsetX, offsetY, pageX, pageY, x, y, target } = event
      const targetRect = target.getBoundingClientRect()
      this.drawingLinePoints++
      this.draw.linePoints.push({
        cx: layerX,
        cy: layerY
      })
      if (this.draw.linePoints.length === 2) {
        const newLine = { start: this.draw.linePoints[0], end: this.draw.linePoints[1] }
        this.draw.lines.push(newLine)
        this.draw.linePoints = []
      }
    },
    text () {
      if (this.$store.state.selectedResult.id) {
        return `LA ${this.$store.state.selectedResult.la} KA ${this.$store.state.selectedResult.ka}`
      }
    }
  },
  props: {
    viewerId: { type: Number, default: () => null },
    viewBoxPercentage: { type: Number, default: () => 1 },
    image: { type: Object, default: () => ({}) },
    color: { type: String, default: () => '#FB355D' },
    lines: { type: Object, default: () => ({}) },
    displayCircle: { type: Boolean, default: () => false },
    displayText: { type: Boolean, default: () => false }
  },
  data () {
    return {
      draw: {
        drawing: false,
        points: 0,
        linePoints: [],
        lines: []
      },
      drawingLine: false,
      drawingLinePoints: 0,
      drawingLineCoords: { start: { cx: 0, cy: 0 }, end: { cx: 0, cy: 0 } }
    }
  },
  computed: {
    zoom () { return (this.$props.viewerId === 0 && this.$store.state.magnifyFirst.active) },
    svgWidth () { return this.$props.image.viewBoxWidth * this.$props.viewBoxPercentage },
    svgHeight () { return this.$props.image.viewBoxWidth * this.$props.viewBoxPercentage },
    viewBox () { return `0 0 ${this.svgWidth} ${this.svgHeight}` },
    imageX () {
      if (this.zoom) { return this.$props.image.x - (this.$props.image.width * 2) - 250 }
      return this.$props.image.x * this.$props.viewBoxPercentage
    },
    imageY () {
      if (this.zoom) { return this.$props.image.y - (this.$props.image.height * 2) - 600 }
      return this.$props.image.y * this.$props.viewBoxPercentage
    },
    imageWidth () {
      if (this.zoom) { return this.$props.image.width * 8 }
      return this.$props.image.width * this.$props.viewBoxPercentage
    },
    imageHeight () {
      if (this.zoom) { return this.$props.image.height * 8 }
      return this.$props.image.height * this.$props.viewBoxPercentage
    },
    displayLines () {
      return (!this.zoom && Object.entries(this.$props.lines).length > 0)
    },
    translateX () { return this.$props.image.translate[0] * this.$props.viewBoxPercentage },
    translateY () { return this.$props.image.translate[1] * this.$props.viewBoxPercentage },
    groupTranslate () { return `translate(${this.translateX}, ${this.translateY})` },
    lineA () {
      if (!this.displayLines) { return null }
      const { start, end } = this.$props.lines.a
      return {
        start: mapValues(start, value => value * this.$props.viewBoxPercentage),
        end: mapValues(end, value => value * this.$props.viewBoxPercentage)
      }
    },
    lineB () {
      if (!this.displayLines) { return null }
      const { start, end } = this.$props.lines.b
      return {
        start: mapValues(start, value => value * this.$props.viewBoxPercentage),
        end: mapValues(end, value => value * this.$props.viewBoxPercentage)
      }
    },
    xCoords () {
      if (!this.displayLines) { return null }
      return [this.lineA.start.cx, this.lineA.end.cx, this.lineB.start.cx, this.lineB.end.cx]
    },
    yCoords () {
      if (!this.displayLines) { return null }
      return [this.lineA.start.cx, this.lineA.end.cx, this.lineB.start.cx, this.lineB.end.cx]
    },
    minX () {
      if (!this.displayLines) { return null }
      return Math.min(...this.xCoords)
    },
    minY () {
      if (!this.displayLines) { return null }
      return Math.min(...this.yCoords)
    },
    maxX () {
      if (!this.displayLines) { return null }
      return Math.max(...this.xCoords)
    },
    maxY () {
      if (!this.displayLines) { return null }
      return Math.max(...this.yCoords)
    },
    lineAreaX () {
      if (!this.displayLines) { return null }
      return this.maxX - this.minX
    },
    lineAreaY () {
      if (!this.displayLines) { return null }
      return this.maxY - this.minY
    }
  }
}
</script>