Comment implémenter des effets de mise à l'échelle d'image et de loupe dans Vue ?

Comment implémenter la mise à l'échelle de l'image et l'effet de loupe dans Vue ?

Avec le développement continu de la technologie Web, les utilisateurs ont des exigences de plus en plus élevées en matière d'effet d'affichage des images sur le site Web. Parmi eux, le zoom d’image et les effets de loupe sont des exigences relativement courantes. Il est relativement simple d'implémenter des effets de mise à l'échelle d'image et de loupe dans Vue. Ensuite, je présenterai en détail la méthode d'implémentation spécifique.

1. Méthode de base

Tout d'abord, voyons comment obtenir l'effet de mise à l'échelle de base de l'image. La méthode d'implémentation est simple, il suffit d'utiliser les instructions intégrées de Vue v-bind et les styles de transformation.

Code HTML :

<template>
  <div>
    <div class="image-container">
      <img 
        class="image" 
        :src="imageUrl" 
        :style="`transform: scale(${scale})`" 
        @mouseenter="onEnter" 
        @mouseleave="onLeave" 
        @mousemove="onMove" 
      />
    </div>
  </div>
</template>

Dans le code ci-dessus, nous définissons un élément img et définissons un nom de classe pour son image. Le style de transformation de l'élément est calculé pour représenter sa mise à l'échelle.

Ensuite, nous devons attribuer et transmettre les variables qui doivent être utilisées dans le composant via les méthodes get et set dans l'attribut calculé.

Code JavaScript :

<script>
  export default {
    name: 'Image',
    data() {
      return {
        imageUrl: '/path/to/image',
        scale: 1
      }
    },
    computed: {
      onEnter() {
        this.scale = 2
      },
      onLeave() {
        this.scale = 1
      },
      onMove(e) {
        let scale = 2
        let rect = e.target.getBoundingClientRect()
        let x = e.clientX - rect.left
        let y = e.clientY - rect.top
        let translateX = (scale - 1) * (-x)
        let translateY = (scale - 1) * (-y)
        let transformStyle = `transform: scale(${scale}); transform-origin: ${x}px ${y}px; translate(${translateX}px, ${translateY}px)`
        this.scale = transformStyle
      }
    }
  }
</script>

En définissant trois propriétés calculées onEnter, onLeave et onMove et en les appelant dans les événements correspondants, nous pouvons facilement obtenir l'effet de mise à l'échelle de base de l'image.

2. Méthode avancée

Ensuite, voyons comment obtenir l'effet de loupe d'image. Cet effet permet à l'utilisateur d'agrandir la partie zoomée à travers un petit carré lors du zoom. Les méthodes d'implémentation sont fondamentalement les mêmes et il vous suffit d'apporter certaines modifications aux parties pertinentes du code.

Code HTML :

<template>
  <div>
    <div 
      class="image-container"
      :style="`width: ${width}px; height: ${height}px`"
      @mouseenter="onEnter"
      @mouseleave="onLeave"
      @mousemove="onMove"
    >
      <img 
        class="image" 
        :src="imageUrl" 
        :style="`transform: scale(${scale})`" 
        ref="image"
      />
    </div>
    <div 
      class="magnifier-container"
      v-if="showMagnifier"
      :style="`transform: translate(-50%, -50%) scale(${scale}); top: ${mTop}px; left: ${mLeft}px`"
    >
      <div 
        class="magnifier" 
        :style="`background-image: url(${imageUrl}); background-size: ${width}px ${height}px; width: ${mWidth}px; height: ${mHeight}px;`"
      ></div>
    </div>
  </div>
</template>

Dans ce composant, nous créons d'abord un élément div et définissons un nom de classe pour son conteneur d'images. Cet élément est utilisé pour contenir l'élément img et définir sa largeur et sa hauteur. Dans le même temps, nous avons remplacé les événements d'entrée, de sortie et de déplacement de la souris et les avons appelés dans les propriétés calculées.

Dans l'élément img, nous avons ajouté un attribut ref pour obtenir le handle de l'élément et l'utiliser dans l'attribut calculé.

Au bas du composant, nous créons un autre élément div pour contenir un petit carré. Cet élément obtient l'effet loupe en calculant l'attribut de style.

Ensuite, nous devons attribuer et transférer les définitions de variables et les méthodes de calcul pertinentes.

Code JavaScript :

<script>
  export default {
    name: 'Image',
    data() {
      return {
        imageUrl: '/path/to/image',
        width: 500,
        height: 350,
        scale: 1,
        showMagnifier: false,
        mWidth: 100,
        mHeight: 100,
        mTop: 0,
        mLeft: 0
      }
    },
    computed: {
      onEnter() {
        this.showMagnifier = true
      },
      onLeave() {
        this.showMagnifier = false
      },
      onMove(e) {
        let rect = this.$refs.image.getBoundingClientRect()
        let x = e.clientX - rect.left
        let y = e.clientY - rect.top
        this.mTop = y - this.mHeight / 2
        this.mLeft = x - this.mWidth / 2
        let translateX = (this.scale - 1) * (-x)
        let translateY = (this.scale - 1) * (-y)
        let transformStyle = `transform: scale(${this.scale}); transform-origin: ${x}px ${y}px; translate(${translateX}px, ${translateY}px)`
        this.scale = transformStyle
      }
    }
  }
</script>

Dans le code ci-dessus, nous définissons les propriétés calculées onEnter, onLeave, onMove et les appelons dans les événements correspondants. Dans le même temps, nous avons également défini certaines variables auxiliaires et obtenu l'effet loupe en calculant et en attribuant des valeurs à ces variables.

3. Résumé

En implémentant des effets de zoom et de loupe sur l'image, l'effet d'affichage de l'image du site Web peut être rendu plus vivant et plus riche, améliorant ainsi l'expérience utilisateur. L'implémentation de cette fonction dans Vue est relativement simple et ne nécessite que certains calculs et applications pour la mener à bien.

Pendant le processus de mise en œuvre, nous pouvons effectuer des ajustements personnalisés en fonction de nos propres besoins et développer d'autres styles ou instructions d'événement. C’est peut-être aussi l’essence du développement continu de la technologie Web.

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!