feat: 🚀 select两个缩放完成

src/views/select/basic/index.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { useEventListener, useWindowSize } from '@vueuse/core';
 import Konva from 'konva/lib';
@@ -14,6 +14,36 @@ const { width, height } = useWindowSize();
 const stage = ref<Stage>();
 const layer = ref<Layer>();
 const tr = ref();
+const SCALE_BY = 1.1;
+
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) return;
+
+		// 之前缩放比例
+		const scaleX = stage.value?.scaleX();
+		const scaleY = stage.value?.scaleY();
+
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / scaleX,
+			y: (pointer!.y - stage.value?.y()) / scaleY,
+		};
+
+		// 判断鼠标滚轮向上还是向下
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
+		const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
+		stage.value?.scale({ x, y });
+
+		const position = {
+			x: pointer!.x - mousePointTo.x * x,
+			y: pointer!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
 
 const initial = () => {
 	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
@@ -40,6 +70,8 @@ onMounted(() => {
 
 		// tr.value.forceUpdate();
 	});
+
+	zoomed();
 });
 </script>
 

src/views/select/complex-styling/index.vue

@@ -1,15 +1,49 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
+const stage = ref<Stage>();
+const SCALE_BY = 1.1;
+
+/**
+ * * 缩放
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) {
+			return;
+		}
+
+		const scaleX = stage.value?.scaleX();
+		const scaleY = stage.value?.scaleY();
+
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / scaleX,
+			y: (pointer!.y - stage.value?.y()) / scaleY,
+		};
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
+		const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
+		stage.value?.scale({ x, y });
+
+		const position = {
+			x: pointer!.x - mousePointTo.x * x,
+			y: pointer!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
 
 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();
 
-	stage.add(layer);
+	stage.value.add(layer);
 
 	const circle = new Konva.Circle({
 		x: 150,
@@ -38,6 +72,8 @@ const initial = () => {
 		},
 		nodes: [circle],
 	});
+
+	zoomed();
 	layer.add(tr);
 };
 
@@ -50,4 +86,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>