Vue implementiert unregelmäßige Screenshots

    <div>
        <div Klasse="Inhalt" @mousemove="mousemove" @mouseup="(e) => {mouseup(e);}">
          <!-- Canvas-Anzeige -->
          <svg
            ref="schwarzSvg"
            Klasse="schwarzSvg"
            xmlns="http://www.w3.org/2000/svg"
            Breite="300"
            Höhe="300"
          >
            <Definitionen>
              <clipPath id="clippfad">
                <polygon :points="Punkte"></polygon>
              </clipPfad>
            </defs>
            <Bild
              xmlns:link="http://www.w3.org/1999/xlink"
              href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" rel="externes Nofollow" 
              Breite="300"
              Höhe="300"
              preserveAspectRatio="keine"
              Stil="Clip-Pfad: URL(#ClipPfad)"
            ></Bild>
          </svg>
          <!-- Punkt ziehen -->
          <ul Klasse="Abfangen">
            <li
              v-for="Element in 4"
              :ref="`li${item}`"
              :Schlüssel="Artikel"
              @mousedown="(e) => {mousedown(e, Element);}"
            ></li>
          </ul>
          <!-- Basiskartenanzeige -->
          <Bild
            Klasse="schwarzesBild"
            Quelle="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
            alt=""
          />
          <!-- Maskenebene-->
          <div Klasse="schwarzDiv"></div>
    </div>
  </div>

<style lang="sass">
.schwarzDiv
    Breite: 100%
    Höhe: 100%
    Position: absolut
    oben: 0
    Z-Index: 2
    Hintergrund: rgba(0,0,0, 1)
.Inhalt
    Breite: 300px
    Höhe: 300px
    Textausrichtung: links
    Position: relativ
    .schwarzSvg
        Position: absolut
        oben: 0
        Z-Index: 3
    .schwarzesBild
        Position: absolut
        oben: 0
        links: 0
        Breite: 300px
        Höhe: 300px
    .Abfangen
        Listenstil: keiner
        Position: absolut
        oben: 0
        Marge: 0
        Polsterung: 0
        Z-Index: 3
        >li
            Position: absolut
            Breite: 10px
            Höhe: 10px
            Hintergrund: blau
            Randradius: 50 %
            Cursor: Zeiger
            &:schweben
                transformieren: Skalierung(1.2)
                Übergangsdauer: .2
        >li:ntes-Kind(1)
            oben: 10px
            links: 10px
        >li:ntes-Kind(2)
            oben: 10px
            links: 100px
        >li:ntes-Kind(3)
            oben: 100px
            links: 100px
        >li:ntes-Kind(4)
            oben: 100px
            links: 10px
</Stil>
<Skript>

Standard exportieren {
  Name: 'Canvas',
  Daten() {
    zurückkehren {
      Punkte: '0 0,300 0,300 300,0 300', // Initialisierungsstatus der Bildanzeige: false,
      Index: 0,
      disX: 0,
      disY: 0,
      Koordinaten: { // Initialisiere Ziehpunkt 1: [0, 0],
        2: [300, 0],
        3: [300, 300],
        4: [0, 300],
      },
    };
  },
  montiert() {
    dies.$nextTick(() => {
      für (let-Schlüssel in this.coordinates) {
        const left = diese.Koordinaten[Schlüssel][0];
        const top = diese.Koordinaten[Schlüssel][1];
        dies.$refs[`li${key}`].style.left = `${left}px`;
        dies.$refs[`li${key}`].style.top = `${top}px`;
        wenn (Schlüssel == 2 || Schlüssel == 3) {
          dies.$refs[`li${key}`].style.left = `${left - 10}px`;
        }
        wenn (Schlüssel == 3 || Schlüssel == 4) {
          dies.$refs[`li${key}`].style.top = `${top - 10}px`;
        }
      }
      document.onmouseup = () => {
        dieser.status = falsch;
      };
    });
  },
  Methoden: {
    //Maus runter mousedown(e, index) {
      dieser.status = wahr;
      dies.index = index;
      this.disX = e.clientX - this.$refs[`li${index}`].offsetLeft;
      this.disY = e.clientY - this.$refs[`li${index}`].offsetTop;
    },
    // Maus hoch mouseup(e) {
      dieser.status = falsch;
    },
    //Mausbewegung mousemove(e) {
      wenn (dieser.status) {
        lass links = e.clientX - this.disX;
        let top = e.clientY - this.disY;
        dies.$refs[`li${this.index}`].style.left = `${left}px`;
        dies.$refs[`li${this.index}`].style.top = `${top}px`;
        this.coordinates[this.index] = [links, oben];
        const PunkteArr = [];
        für (let item in this.coordinates) {
          PunkteArr.push(
            Array.from(dieses.coordinates[item], (e) => {
              gebe e + 5 zurück;
            })
          );
        }
        dies.Punkte = PunkteArr.join(' ');
      }
    },
  },
};