vueでステッカーを削除する方法

vue.js に基づいて Web アプリケーションを構築することは、ますます多くのフロントエンド開発者の選択となっています。ステッカー機能の実装は、多くのソーシャル アプリケーションでも重要な部分になっています。 vue.js テクノロジースタックで、ステッカー機能を実装するにはどうすればよいですか?この記事ではvue.jsでステッカーを実装する方法を詳しく紹介します。

1. 素材の準備

vue.js でステッカー機能を実装するには、関連する素材を準備する必要があります。つまり、ステッカー画像と関連データ ファイル (ステッカー名、場所など) が含まれるフォルダーです。ここでは、require.ensure を使用して素材ファイルを非同期に読み込むことができます。これにより、アプリケーションはユーザーの操作に素早く応答し、ページの読み込み時間を短縮できます。

2. ステッカーを表示する

vue.js でステッカーを表示するには、vue.js のレンダリング機能を使用してステッカー要素をページに追加する必要があります。これに基づいて、ユーザーのマウス イベントを監視することで、ステッカーのドラッグや拡大縮小などのインタラクティブな効果を実現できます。

1. ステッカーのレンダリング

vue.js のレンダリング関数では、v-for 命令を通じてステッカー配列をトラバースし、各ステッカーをページにレンダリングできます。

render(h) {
  return h('div', {
    class: 'sticker-wrapper',
  },
  this.$store.state.stickers.map(sticker => {
    return h('img', {
      class: 'sticker',
      style: {
        top: `${sticker.y}px`,
        left: `${sticker.x}px`,
        width: `${sticker.width}px`,
      },
      domProps: {
        src: sticker.src,
      },
      on: {
        mousedown: (event) => {
          this.dragSticker(event, sticker);
        },
      },
    });
  }));
}

2. ステッカーのドラッグ

マウス イベントをリッスンすることで、ステッカーのドラッグ効果を実現できます。

dragSticker(event, sticker) {
  this.selectedSticker = sticker;
  this.dragging = true;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  window.addEventListener('mousemove', this.moveSticker);
  window.addEventListener('mouseup', this.finishDrag);
},
moveSticker(event) {
  if (!this.dragging || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  this.selectedSticker.x = this.stickerStartX + deltaX;
  this.selectedSticker.y = this.stickerStartY + deltaY;
},
finishDrag() {
  this.dragging = false;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.moveSticker);
  window.removeEventListener('mouseup', this.finishDrag);
},

3. ステッカーのスケーリング

ドラッグ アンド ドロップ効果と同様に、ユーザーのマウス イベントをリッスンすることでステッカーのサイズを動的に調整することもできます。

resizeSticker(event, sticker, handle) {
  this.selectedSticker = sticker;
  event.stopPropagation();
  this.resizing = handle;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  this.stickerWidth = sticker.width;
  window.addEventListener('mousemove', this.handleResize);
  window.addEventListener('mouseup', this.finishResize);
},
handleResize(event) {
  if (!this.resizing || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  const scale = Math.min(Math.abs(deltaX), Math.abs(deltaY));
  if (this.resizing === 'nw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'ne') {
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth + scale;
  } else if (this.resizing === 'sw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'se') {
    this.selectedSticker.width = this.stickerWidth + scale;
  }
},
finishResize() {
  this.resizing = null;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.handleResize);
  window.removeEventListener('mouseup', this.finishResize);
},

3. ステッカーの位置情報を保存する

ユーザーが次回アプリケーションを開いたときに前のステッカーの位置情報を取得できるように、ステッカー配列をグローバルに保存できます。 vuex の状態は、Vuex を通じてステッカー データへの変更を管理します。

mutations: {
  addSticker(state, newSticker) {
    state.stickers.push(newSticker);
  },
  removeSticker(state, sticker) {
    state.stickers.splice(state.stickers.indexOf(sticker), 1);
  },
  updateSticker(state, payload) {
    const sticker = payload.sticker;
    if (payload.prop === 'x') {
      sticker.x = payload.value;
    } else if (payload.prop === 'y') {
      sticker.y = payload.value;
    } else if (payload.prop === 'width') {
      sticker.width = payload.value;
    }
  },
},

vuex で管理されているデータとコンポーネントの計算されたプロパティを組み合わせることで、データの双方向バインディングを簡単に実現できます。

computed: {
  ...mapState(['stickers']),
},

4. まとめ

vue.jsのレンダリング機能とvuexのデータ管理により、ステッカー機能のインタラクティブ効果を簡単に実現し、ステッカーの位置情報をファイルに保存することができます。グローバル状態 。これにより、次回アプリを開いたときにステッカーの位置情報を復元できます。同時に、ユーザーエクスペリエンスを向上させるために、ステッカーが重なったり、画面からはみ出したりする問題を回避することにも注意を払う必要があります。

以上がvueでステッカーを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。