feat: 🚀 event-page 所有缩放完成

public/verify.json

@@ -1 +1 @@
-{"version":1721834336660}
+{"version":1721867671704}

src/views/event-page/listen-event/index.vue

@@ -1,18 +1,57 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
 import { Circle } from 'konva/lib/shapes/Circle';
 import { Text } from 'konva/lib/shapes/Text';
 import { Layer } from 'konva/lib/Layer';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const circle = ref<Circle>();
 const text = ref<Text>();
+const stage = ref<Stage>();
 const layer = ref<Layer>();
+const SCALE_BY = 1.1;
+
+/**
+ * * 缩放画布
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) return;
+
+		// 当前缩放比例，获取X或者是Y轴都一样
+		const oldScaleX = stage.value?.scaleX();
+		const oldScaleY = stage.value?.scaleY();
+
+		// 当前鼠标位置
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / oldScaleX,
+			y: (pointer!.y - stage.value?.y()) / oldScaleY,
+		};
+
+		// 判断鼠标滚轮是向上滚动还是向下滚动
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		// 新的缩放
+		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
+		const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY;
+		// 设置新的缩放比例
+		stage.value!.scale({ x: newScaleX, y: newScaleY });
+
+		// 设置新的鼠标位置，缩放时保持不变
+		const newPosition = {
+			x: pointer!.x - mousePointTo.x * newScaleX,
+			y: pointer!.y - mousePointTo.y * newScaleY,
+		};
+		stage.value!.position(newPosition);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
 	layer.value = new Konva.Layer({ draggable: true });
 
 	text.value = new Konva.Text({
@@ -24,8 +63,8 @@ const initial = () => {
 	layer.value.add(text.value);
 
 	circle.value = new Konva.Circle({
-		x: stage.width() / 2,
-		y: stage.height() / 2,
+		x: stage.value.width() / 2,
+		y: stage.value.height() / 2,
 		radius: 70,
 		fill: '#adf',
 		stroke: 'black',
@@ -42,7 +81,9 @@ const initial = () => {
 	});
 	layer.value.add(circle.value);
 
-	stage.add(layer.value);
+	stage.value.add(layer.value);
+
+	zoomed();
 };
 
 /**
@@ -68,10 +109,10 @@ onMounted(() => {
 
 <template>
 	<div class="container position-absolute start-0 top-6 z-1">
-		<button type="button" class="btn btn-primary" @click="onStartListening">开始监听</button>
-		<button type="button" class="btn btn-danger" @click="onRemoveListening">移出监听</button>
+		<button class="btn btn-primary" type="button" @click="onStartListening">开始监听</button>
+		<button class="btn btn-danger" type="button" @click="onRemoveListening">移出监听</button>
 	</div>
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/event-page/remove-event/index.vue

@@ -1,24 +1,63 @@
 <template>
 	<div class="container">
-		<button type="button" class="btn btn-primary" @click="onRemoveEvent">移出事件</button>
+		<button class="btn btn-primary" type="button" @click="onRemoveEvent">移出事件</button>
 	</div>
 	<div id="container"></div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
 import { Text } from 'konva/lib/shapes/Text';
 import { Circle } from 'konva/lib/shapes/Circle';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const circle = ref<Circle>();
 const text = ref<Text>();
 const count = ref(0);
+const stage = ref<Stage>();
+const SCALE_BY = 1.1;
+
+/**
+ * * 缩放
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) {
+			return;
+		}
+
+		// 之前缩放比例
+		const oldScaleX = stage.value?.scaleX();
+		const oldScaleY = stage.value?.scaleY();
+
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / oldScaleX,
+			y: (pointer!.y - stage.value?.y()) / oldScaleY,
+		};
+
+		// 判断鼠标是向上滚动还是向下滚动和
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		// 设置新的缩放比例
+		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
+		const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY;
+		stage.value?.scale({ x: newScaleX, y: newScaleY });
+
+		// 设置鼠标位置保持不变
+		const newPosition = {
+			x: pointer!.x - mousePointTo.x * newScaleX,
+			y: pointer!.y - mousePointTo.y * newScaleY,
+		};
+		stage.value!.position(newPosition);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
 	const layer = new Konva.Layer({ draggable: true });
 
 	// 添加文字
@@ -34,8 +73,8 @@ const initial = () => {
 
 	// 添加圆形
 	circle.value = new Konva.Circle({
-		x: stage.width() / 2,
-		y: stage.height() / 2 + 10,
+		x: stage.value.width() / 2,
+		y: stage.value.height() / 2 + 10,
 		radius: 70,
 		fill: 'green',
 		stroke: 'black',
@@ -51,7 +90,9 @@ const initial = () => {
 		count.value++;
 	});
 
-	stage.add(layer);
+	stage.value.add(layer);
+
+	zoomed();
 };
 
 // 移出点击事件