Bagaimana untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue?

Bagaimana untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue?

Dengan pembangunan teknologi web yang berterusan, pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk kesan paparan imej pada tapak web. Antaranya, zum imej dan kesan kaca pembesar adalah keperluan yang agak biasa. Ia agak mudah untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue Seterusnya, saya akan memperkenalkan kaedah pelaksanaan khusus secara terperinci.

1. Kaedah asas

Pertama, mari kita lihat bagaimana untuk mencapai kesan penskalaan imej asas. Kaedah pelaksanaannya mudah, hanya gunakan arahan terbina dalam Vue v-bind dan ubah gaya.

Kod 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>

Dalam kod di atas, kami mentakrifkan elemen img dan menetapkan nama kelas untuk imej itu. Gaya transformasi elemen dikira untuk mewakili skalanya.

Seterusnya, kita perlu menetapkan dan lulus pembolehubah yang perlu digunakan dalam komponen melalui kaedah get dan set dalam atribut yang dikira.

Kod 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>

Dengan mentakrifkan tiga sifat yang dikira, onEnter, onLeave dan onMove, dan memanggilnya dalam acara yang sepadan, kita boleh mencapai kesan penskalaan imej asas dengan mudah.

2. Kaedah lanjutan

Seterusnya, mari kita lihat bagaimana untuk mencapai kesan kaca pembesar gambar. Kesan ini membolehkan pengguna membesarkan bahagian yang dizum melalui petak kecil sambil mengezum. Kaedah pelaksanaan pada asasnya adalah sama, dan anda hanya perlu membuat pengubahsuaian tertentu pada bahagian kod yang berkaitan.

Kod 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>

Dalam komponen ini, kita mula-mula mencipta elemen div dan menetapkan nama kelas untuknya bekas imej. Elemen ini digunakan untuk memegang elemen img dan menetapkan lebar dan ketinggiannya. Pada masa yang sama, kami mengatasi tetikus masuk, keluar dan gerakkan acara dan memanggilnya dalam sifat yang dikira.

Dalam elemen img, kami menambah atribut ref untuk mendapatkan pemegang elemen dan menggunakannya dalam atribut yang dikira.

Di bahagian bawah komponen, kami mencipta satu lagi elemen div untuk memegang segi empat sama kecil. Elemen ini mencapai kesan kaca pembesar dengan mengira atribut gaya.

Seterusnya, kita perlu menetapkan dan memindahkan definisi pembolehubah yang berkaitan dan kaedah pengiraan.

Kod 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>

Dalam kod di atas, kami mentakrifkan sifat yang dikira onEnter, onLeave, onMove dan memanggilnya dalam acara yang sepadan. Pada masa yang sama, kami juga menentukan beberapa pembolehubah tambahan, dan mencapai kesan kaca pembesar gambar dengan mengira dan memberikan nilai kepada pembolehubah ini.

3. Ringkasan

Dengan melaksanakan zum imej dan kesan kaca pembesar, kesan paparan imej tapak web boleh dibuat lebih jelas dan kaya, menjadikan pengalaman pengguna lebih baik. Melaksanakan fungsi ini dalam Vue agak mudah, dan hanya memerlukan pengiraan dan aplikasi tertentu untuk berjaya menyelesaikannya.

Semasa proses pelaksanaan, kami boleh membuat pelarasan tersuai mengikut keperluan kami sendiri dan berkembang melalui gaya atau arahan acara lain. Mungkin, ini juga merupakan intipati pembangunan berterusan teknologi Web.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penskalaan imej dan kesan kaca pembesar dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!