From 55bf797dcc730b37bc691ebab2b51ff9db8ed245 Mon Sep 17 00:00:00 2001
From: zs <zhousong@weben-smart.com>
Date: 周二, 06 5月 2025 17:37:23 +0800
Subject: [PATCH] 修改代码样式
---
HIAWms/web/src/components/TouchScale/index.vue | 178 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 178 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/TouchScale/index.vue b/HIAWms/web/src/components/TouchScale/index.vue
new file mode 100644
index 0000000..1ea6efc
--- /dev/null
+++ b/HIAWms/web/src/components/TouchScale/index.vue
@@ -0,0 +1,178 @@
+<template>
+ <div class="_touchScale">
+ <slot></slot>
+ <div class="_touch-mask" v-if="isShowMask"></div>
+ </div>
+</template>
+<script lang="ts" setup>
+import { onMounted, computed, reactive } from 'vue'
+const store: any = reactive({
+ scale: 1,
+})
+
+const decomposeMatrix = (matrix: string) => {
+ // 浣跨敤姝ｅ垯琛ㄨ揪寮忔彁鍙栫煩闃典腑鐨勬暟鍊奸儴鍒�
+ const matrixRegex = /matrix\((.+),\s*(.+),\s*(.+),\s*(.+),\s*(.+),\s*(.+)/
+ const matches = matrix.match(matrixRegex)
+
+ if (!matches) {
+ throw new Error('閿欒')
+ }
+
+ // 鎻愬彇骞崇Щ鍜岀缉鏀惧��
+ const scaleX = parseFloat(matches[1])
+ const scaleY = parseFloat(matches[4])
+ const translateX = parseFloat(matches[5])
+ const translateY = parseFloat(matches[6])
+
+ return {
+ translate: { x: translateX, y: translateY },
+ scale: { x: scaleX, y: scaleY },
+ }
+}
+
+const isShowMask = computed(() => store.isShowMask)
+
+const initEvent = () => {
+ const ele: any = document.querySelector('._touchScale')
+
+ // 缂╂斁浜嬩欢鐨勫鐞�
+ ele.addEventListener('touchstart', function (event: any) {
+ const touches = event?.touches
+ const events = touches[0]
+ const events2 = touches[1]
+
+ // 绗竴涓Е鎽哥偣鐨勫潗鏍�
+ store.pageX = events.pageX
+ store.pageY = events.pageY
+ store.moveable = true
+ store.originScale = store.scale || 1
+ const transform = window.getComputedStyle(ele, null).transform
+ if (transform !== 'none') {
+ store.matrix = decomposeMatrix(transform)
+ }
+ if (events2) {
+ store.pageX2 = events2.pageX
+ store.pageY2 = events2.pageY
+ } else {
+ // 鍙屽嚮
+ store.isDbl = false
+ if (!store.t) {
+ store.t = Date.now()
+ } else {
+ const t = Date.now() - store.t
+ if (t <= 400) {
+ store.isDbl = true
+ }
+ store.t = null
+ }
+ }
+ if (store.isDbl) {
+ store.scale = store.scale - 0.1
+ const translateX = store.matrix?.translate?.x || 0
+ const translateY = store.matrix?.translate?.y || 0
+ ele.style.transform = `translate(${translateX}px, ${translateY}px) scale(${store.scale})`
+ }
+ })
+
+ document.addEventListener('touchmove', function (event: any) {
+ if (!store.moveable) {
+ return
+ }
+ store.t = null
+ store.isDbl = false
+ store.isShowMask = true
+ event.preventDefault()
+
+ var touches = event.touches
+ var events = touches[0]
+ var events2 = touches[1]
+ const translateX = store.matrix?.translate?.x || 0
+ const translateY = store.matrix?.translate?.y || 0
+ // 鍙屾寚绉诲姩
+ if (events2) {
+ // 绗�2涓寚澶村潗鏍囧湪touchmove鏃跺�欒幏鍙�
+ if (!store.pageX2) {
+ store.pageX2 = events2.pageX
+ }
+ if (!store.pageY2) {
+ store.pageY2 = events2.pageY
+ }
+
+ // 鑾峰彇鍧愭爣涔嬮棿鐨勪妇渚�
+ var getDistance = function (start: any, stop: any) {
+ return Math.hypot(stop.x - start.x, stop.y - start.y)
+ }
+ // 鍙屾寚缂╂斁姣斾緥璁＄畻
+ var zoom =
+ getDistance(
+ {
+ x: events.pageX,
+ y: events.pageY,
+ },
+ {
+ x: events2.pageX,
+ y: events2.pageY,
+ }
+ ) /
+ getDistance(
+ {
+ x: store.pageX,
+ y: store.pageY,
+ },
+ {
+ x: store.pageX2,
+ y: store.pageY2,
+ }
+ )
+ // 搴旂敤鍦ㄥ厓绱犱笂鐨勭缉鏀炬瘮渚�
+ var newScale = store.originScale * zoom
+ // 鏈�澶х缉鏀炬瘮渚嬮檺鍒�
+ // if (newScale > 3) {
+ // newScale = 3
+ // }
+ // 璁颁綇浣跨敤鐨勭缉鏀惧��
+ store.scale = newScale
+
+ // 鍥惧儚搴旂敤缂╂斁鏁堟灉
+ ele.style.transform = `translate(${translateX}px, ${translateY}px) scale(${store.scale})`
+ } else {
+ // 鍗曟寚绉诲姩
+ const x = events.pageX - store.pageX + translateX
+ const y = events.pageY - store.pageY + translateY
+
+ ele.style.transform = `translate(${x}px, ${y}px) scale(${store.scale})`
+ }
+ })
+
+ document.addEventListener('touchend', function () {
+ store.moveable = false
+ store.isShowMask = false
+ delete store.pageX2
+ delete store.pageY2
+ })
+ document.addEventListener('touchcancel', function () {
+ store.moveable = false
+ store.isShowMask = false
+
+ delete store.pageX2
+ delete store.pageY2
+ })
+}
+onMounted(() => initEvent())
+</script>
+
+<style lang="scss" scoped>
+._touchScale {
+ width: fit-content;
+ height: fit-content;
+ position: relative;
+ ._touch-mask {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+}
+</style>
--
Gitblit v1.9.3