Vueは不規則なスクリーンショットを実装する

    <div>
        <div class="content" @mousemove="mousemove" @mouseup="(e) => {mouseup(e);}">
          <!-- キャンバス表示 -->
          <svg
            ref="blackSvg"
            クラス="blackSvg"
            xmlns="http://www.w3.org/2000/svg"
            幅="300"
            高さ="300"
          >
            <定義>
              <clipPath id="クリップパス">
                <ポリゴン :points="ポイント"></ポリゴン>
              </クリップパス>
            </defs>
            <画像
              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="外部nofollow" 
              幅="300"
              高さ="300"
              preserveAspectRatio="なし"
              スタイル="クリップパス: url(#clippath)"
            </画像>
          </svg>
          <!-- ポイントをドラッグ -->
          <ul class="インターセプション">
            <li
              v-for="4 内の項目"
              :ref="`li${item}`"
              :key="アイテム"
              @mousedown="(e) => {mousedown(e, 項目);}"
            </li>
          </ul>
          <!-- ベースマップの表示 -->
          <画像
            クラス="blackImge"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
            代替案=""
          />
          <!-- マスクレイヤー-->
          <div class="blackDiv"></div>
    </div>
  </div>

<スタイル lang="sass">
.blackDiv
    幅: 100%
    高さ: 100%
    位置: 絶対
    トップ: 0
    Zインデックス: 2
    背景: rgba(0,0,0, 1)
。コンテンツ
    幅:300ピクセル
    高さ:300ピクセル
    テキスト配置: 左
    位置: 相対
    .blackSvg
        位置: 絶対
        トップ: 0
        Zインデックス: 3
    .black画像
        位置: 絶対
        トップ: 0
        残り: 0
        幅: 300ピクセル
        高さ: 300ピクセル
    。傍受
        リストスタイル: なし
        位置: 絶対
        トップ: 0
        マージン: 0
        パディング: 0
        Zインデックス: 3
        >リ
            位置: 絶対
            幅: 10ピクセル
            高さ: 10ピクセル
            背景: 青
            境界線の半径: 50%
            カーソル: ポインタ
            &:ホバー
                変換: スケール(1.2)
                遷移期間: .2
        >li:n番目の子(1)
            上: 10ピクセル
            左: 10ピクセル
        >li:n番目の子(2)
            上: 10ピクセル
            左: 100ピクセル
        >li:n番目の子(3)
            上: 100ピクセル
            左: 100ピクセル
        >li:n番目の子(4)
            上: 100ピクセル
            左: 10ピクセル
</スタイル>
<スクリプト>

エクスポートデフォルト{
  名前: 'キャンバス'、
  データ（） {
    戻る {
      ポイント: '0 0,300 0,300 300,0 300', // 画像表示初期化ステータス: false,
      インデックス: 0,
      ディスX: 0,
      ディスY: 0,
      座標: { // ドラッグポイント1を初期化: [0, 0],
        2: [300, 0],
        3: [300, 300],
        4: [0, 300],
      },
    };
  },
  マウント() {
    this.$nextTick(() => {
      for (let key in this.coordinates) {
        const left = this.coordinates[key][0];
        const top = this.coordinates[key][1];
        this.$refs[`li${key}`].style.left = `${left}px`;
        this.$refs[`li${key}`].style.top = `${top}px`;
        (キー == 2 || キー == 3) の場合 {
          this.$refs[`li${key}`].style.left = `${left - 10}px`;
        }
        (キー == 3 || キー == 4) の場合 {
          this.$refs[`li${key}`].style.top = `${top - 10}px`;
        }
      }
      ドキュメント.onmouseup = () => {
        this.status = false;
      };
    });
  },
  メソッド: {
    //マウスダウン mousedown(e, index) {
      this.status = true;
      this.index = インデックス;
      this.disX = e.clientX - this.$refs[`li${index}`].offsetLeft;
      this.disY = e.clientY - this.$refs[`li${index}`].offsetTop;
    },
    // マウスアップ mouseup(e) {
      this.status = false;
    },
    //マウスの移動 mousemove(e) {
      if (this.status) {
        left = e.clientX - this.disX とします。
        top = e.clientY - this.disY とします。
        this.$refs[`li${this.index}`].style.left = `${left}px`;
        this.$refs[`li${this.index}`].style.top = `${top}px`;
        this.coordinates[this.index] = [左、上];
        const pointsArr = [];
        for (let item in this.coordinates) {
          ポイントArr.push(
            Array.from(this.coordinates[item], (e) => {
              e + 5 を返します。
            })
          );
        }
        this.points = pointsArr.join(' ');
      }
    },
  },
};