Comment supprimer les autocollants en vue

Créer des applications Web basées sur vue.js est devenu le choix de plus en plus de développeurs front-end. La mise en œuvre de la fonction autocollant est également devenue un élément important de nombreuses applications sociales. Dans la pile technologique vue.js, comment implémenter la fonction sticker ? Cet article donnera une introduction détaillée à la méthode d'implémentation des autocollants dans vue.js.

1. Préparer le matériel

Pour implémenter la fonction d'autocollant dans vue.js, vous devez préparer le matériel pertinent. C'est-à-dire le dossier contenant les images d'autocollants et les fichiers de données associés (tels que le nom de l'autocollant, l'emplacement, etc.). Ici, nous pouvons utiliser require.ensure pour charger les fichiers de matériaux de manière asynchrone, afin que l'application puisse répondre rapidement aux opérations de l'utilisateur et réduire le temps de chargement des pages.

2. Afficher les autocollants

Pour afficher les autocollants dans vue.js, nous devons utiliser la fonction de rendu de vue.js pour ajouter des éléments d'autocollant à la page. Sur cette base, nous pouvons obtenir des effets interactifs tels que le glissement et le zoom d'autocollants en surveillant les événements de la souris de l'utilisateur.

1. Rendre les autocollants

Dans la fonction de rendu de vue.js, nous pouvons parcourir le tableau d'autocollants via l'instruction v-for et restituer chaque autocollant sur la page.

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. Glissement d'autocollants

En écoutant les événements de la souris, nous pouvons obtenir l'effet de glissement des autocollants.

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. Mise à l'échelle des autocollants

Semblable à l'effet glisser-déposer, nous pouvons également ajuster dynamiquement la taille de l'autocollant en écoutant les événements de la souris de l'utilisateur.

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. Stocker les informations de localisation des autocollants

Afin que les utilisateurs puissent obtenir les informations de localisation des autocollants précédents la prochaine fois qu'ils ouvriront l'application, nous pouvons stocker le tableau d'autocollants dans l'état global de vuex et gérer les modifications des données d'autocollants via 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;
    }
  },
},

En combinant les données gérées dans vuex avec les propriétés calculées du composant, nous pouvons facilement réaliser une liaison bidirectionnelle des données.

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

4. Résumé

Grâce à la fonction de rendu de vue.js et à la gestion des données de vuex, nous pouvons facilement réaliser l'effet interactif de la fonction d'autocollant et enregistrer les informations de position de l'autocollant dans l'état global pour faciliter la prochaine ouverture. de l'application pour restaurer les informations de localisation de l'autocollant. Dans le même temps, nous devons également veiller à éviter les problèmes tels que les autocollants qui se chevauchent et sortent de l'écran afin d'améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!