feat: 🚀 select新增缩放

public/verify.json

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

src/views/select/basic/index.vue

@@ -9,7 +9,6 @@ import { Stage } from 'konva/lib/Stage';
 import { Layer } from 'konva/lib/Layer';
 
 const { width, height } = useWindowSize();
-// let stage, layer;
 
 const stage = ref<Stage>();
 const layer = ref<Layer>();
@@ -18,13 +17,17 @@ 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,
@@ -33,10 +36,12 @@ const zoomed = () => {
 		// 判断鼠标滚轮向上还是向下
 		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,

src/views/select/keep-ratio/index.vue

@@ -1,14 +1,51 @@
-<script setup lang="ts">
-import { onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import { useWindowSize } from '@vueuse/core';
 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 text1 = new Konva.Text({
 		x: 50,
@@ -40,7 +77,10 @@ const initial = () => {
 		keepRatio: false,
 		enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
 	});
+
 	layer.add(tr2);
+
+	zoomed();
 };
 
 onMounted(() => {
@@ -52,4 +92,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/select/resize-limits/index.vue

@@ -1,16 +1,51 @@
-<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 MAX_WIDTH = 200;
+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 pointerPosition = stage.value?.getPointerPosition();
+
+		// 鼠标移动位置
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.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);
+	zoomed();
 	const rect = new Konva.Rect({
 		x: 160,
 		y: 60,

src/views/select/resize-snaps/index.vue

@@ -1,25 +1,57 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import Konva from 'konva/lib';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+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 pointerPosition = stage.value?.getPointerPosition();
+		const mousePointTO = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTO.x * x,
+			y: pointerPosition!.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);
-
-	const xSnaps = Math.round(stage.width() / 100);
-	const ySnaps = Math.round(stage.height() / 100);
-	const cellWidth = stage.width() / xSnaps;
-	const cellHeight = stage.height() / ySnaps;
+	stage.value.add(layer);
+	zoomed();
+	const xSnaps = Math.round(stage.value.width() / 100);
+	const ySnaps = Math.round(stage.value.height() / 100);
+	const cellWidth = stage.value.width() / xSnaps;
+	const cellHeight = stage.value.height() / ySnaps;
 
 	for (let i = 0; i < xSnaps; i++) {
 		layer.add(
 			new Konva.Line({
 				x: i * cellWidth,
-				points: [0, 0, 0, stage.height()],
+				points: [0, 0, 0, stage.value.height()],
 				stroke: '#96e04d',
 				strokeWidth: 1,
 			}),
@@ -31,7 +63,7 @@ const initial = () => {
 			new Konva.Line({
 				y: i * cellHeight,
 				// points: [0, 0, stage.width(), 0],
-				points: [0, 0, stage.width(), 0],
+				points: [0, 0, stage.value.width(), 0],
 				stroke: '#96e04d',
 				strokeWidth: 1,
 			}),
@@ -111,4 +143,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/select/rotation-snaps/index.vue

@@ -1,15 +1,44 @@
-<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 pointerPosition = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.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);
+	zoomed();
 	const text = new Konva.Text({ x: 50, y: 70, fontSize: 30, text: '旋转', draggable: true });
 	layer.add(text);
 

src/views/select/simultaneously/index.vue

@@ -1,16 +1,46 @@
-<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 pointerPosition = stage.value?.getPointerPosition();
+
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.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);
+	zoomed();
 	const text1 = new Konva.Text({
 		x: 50,
 		y: 70,
@@ -51,4 +81,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/select/stop-transform/index.vue

@@ -1,14 +1,50 @@
-<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 pointerPosition = stage.value?.getPointerPosition();
+
+		// 鼠标移动位置
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.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);
+	zoomed();
 
 	const rect = new Konva.Rect({
 		x: 100,

src/views/select/styling/index.vue

@@ -1,15 +1,51 @@
-<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 initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
-	const layer = new Konva.Layer();
-	stage.add(layer);
+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 pointerPosition = stage.value?.getPointerPosition();
+
+		// 鼠标移动位置
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
+
+const initial = () => {
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	const layer = new Konva.Layer();
+	stage.value.add(layer);
+	zoomed();
 	const circle = new Konva.Circle({
 		x: 150,
 		y: 150,
@@ -40,4 +76,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/select/text-resizing/index.vue

@@ -1,16 +1,47 @@
-<script setup lang="ts">
-import { onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
 import { useWindowSize } from '@vueuse/core';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const MIN_WIDTH = 100;
 
-const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
-	const layer = new Konva.Layer();
-	stage.add(layer);
+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 pointerPosition = stage.value?.getPointerPosition();
+
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
+
+const initial = () => {
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	const layer = new Konva.Layer();
+	stage.value.add(layer);
+	zoomed();
 	const text = new Konva.Text({
 		x: 50,
 		y: 60,

src/views/select/transform/index.vue

@@ -2,18 +2,49 @@
 	<div id="container"></div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import Konva from 'konva/lib';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+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 pointerPosition = stage.value?.getPointerPosition();
+
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.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);
+	zoomed();
 
 	// 绘制形状
 	const rect = new Konva.Rect({

src/views/shapes/image/index.vue

@@ -2,21 +2,51 @@
 	<div id="container"></div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import { Layer } from 'konva/lib/Layer';
 import { Image as KonvaImage } from 'konva/lib/shapes/Image';
 import { Stage } from 'konva/lib/Stage';
-import { nextTick, onMounted } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
+
+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 pointerPosition = stage.value?.getPointerPosition();
+
+		const mousePointTo = {
+			x: (pointerPosition!.x - stage.value?.x()) / scaleX,
+			y: (pointerPosition!.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: pointerPosition!.x - mousePointTo.x * x,
+			y: pointerPosition!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
 
 const initial = () => {
-	const stage = new Stage({
+	stage.value = new Stage({
 		container: 'container',
 		width: 500,
 		height: 500,
 		draggable: true,
 	});
 	const layer = new Layer({ draggable: true });
-
+	zoomed();
 	const imageObj = new Image();
 	const konvaImage = new KonvaImage({
 		x: 50,
@@ -40,7 +70,7 @@ const initial = () => {
 		layer.add(darthNode);
 	});
 
-	stage.add(layer);
+	stage.value.add(layer);
 };
 
 onMounted(() => {