vue- pinch- scroll- zoom (英语)

Vue 组件, 使用鼠标事件或移动设备上的两个手指来提供内容滚动和缩放

重要说明

截至目前版本,此组件与Vue"^3.2.47"兼容并进行充分测试. 请确保您正在使用这个版本的Vue 或以后用于最佳性能和相容性. 我们将继续维持和更新这一构成部分,以便支持Vue的后期版本.

示例:

安装

npm i @coddicat/vue-pinch-scroll-zoom

使用量

主关:

import '@coddicat/vue-pinch-scroll-zoom/style.css';

<PinchScrollZoom
  ref="zoomer"
  within
  centered
  key-actions
  :width="300"
  :height="400"
  :min-scale="0.3"
  :max-scale="6"
  @scaling="e => onEvent('scaling', e)"
  @startDrag="e => onEvent('startDrag', e)"
  @stopDrag="e => onEvent('stopDrag', e)"
  @dragging="e => onEvent('dragging', e)"
  style="border: 1px solid black"
  :content-width="500"
  :content-height="500"
>
  <img src="https://picsum.photos/500/500" width="500" height="500" />
</PinchScrollZoom>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import PinchScrollZoom, {
  type PinchScrollZoomEmitData,
  type PinchScrollZoomExposed
} from '@coddicat/vue-pinch-scroll-zoom';

const zoomer = ref<PinchScrollZoomExposed>();

function onEvent(name: string, e: PinchScrollZoomEmitData): void {
  state.eventName = name;
  state.eventData = e;
  state.scale = e.scale;
  state.originX = e.originX;
  state.originY = e.originY;
  state.translateX = e.translateX;
  state.translateY = e.translateY;
}

function reset(): void {
  zoomer.value?.setData({
    scale: 1,
    originX: 150,
    originY: 200,
    translateX: -100,
    translateY: -50
  });
}

道具

以下属性不支持“.async”修改符

活动

以下事件与理由相关:

export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}

• 启动 Drag
• 停止达格
• 拖动
• 缩放

被曝光的方法

更新数据

.setData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}

在可见区域集中图像内容

.centralize();

在可见区域移动图像内容

.manualMove(deltaX: number, deltaY: number);

在可见区域放大图像内容

.manualZoom(factor: number); //factor relative to the current value, so if current scale is 2 and execute .manualZoom(2) the new scale value will be 4