图像金字塔实现图像缩放_用鼠标或触摸缩放图像或其他东西

图像金字塔实现图像缩放

虚拟动物园 (vue-zoomer)

Zoom the image or other thing with mouse or touch.

用鼠标或触摸缩放图像或其他物体。

View demo 查看演示 Download Source 下载源

用法 (Usage)

Install:

安装：

npm install vue-zoomer

Import:

进口：

import Vue from 'vue'
import VueZoomer from 'vue-zoomer'
import 'vue-zoomer/dist/vue-zoomer.css'

Vue.use(VueZoomer)

Single usage:

单一用法：

<v-zoomer style="width: 500px; height: 500px; border: solid 1px silver;">
  <img
    src="./assets/landscape-1.jpg"
    style="object-fit: contain; width: 100%; height: 100%;"
  >
</v-zoomer>

Gallery usage:

图库使用情况：

<v-zoomer-gallery
  style="width: 100vw; height: 100vh;"
  :list="['a.jpg', 'b.jpg', 'c.jpg']"
  v-model="selIndex"
></v-zoomer-gallery>

API (API)

out means the prop is a child -> parent one-way binding. So there must have a .sync modifier.

out表示道具是孩子->父级单向绑定。 因此，必须有一个.sync修饰符。

<v-zoomer>道具 (<v-zoomer> Props)

• maxScale: number - Maximum scale limit, default is 1;

  maxScale: number -最大比例限制，默认为1；

• minScale: number - Minimum scale limit, default is 5;

  minScale: number -最小比例限制，默认为5；

• zoomed: out boolean - Whether zoomed in (scale equals to 1);

  zoomed: out boolean是否放大(比例等于1)；

<v-zoomer-gallery>道具 (<v-zoomer-gallery> Props)

• list: Array<string> required - Displaying image urls;

  list: Array<string> required -显示图像url；

• v-model(value): number required - Index of current showing image;

  v-model(value): number required -当前显示图像的索引；

翻译自: https://vuejsexamples.com/zoom-the-image-or-other-thing-with-mouse-or-touch/

图像金字塔实现图像缩放