画布增加的新功能

src/component/Canvas/CanvasEditor/components/tools/AngleTool.vue

@@ -0,0 +1,121 @@
+<template>
+	<div class="angle-tool">
+		<div
+			ref="dishRef"
+			class="dish"
+			@mousedown.stop="mousedown"
+			@touchmove.stop="mousedown"
+		>
+			<div class="pointer" :style="{ transform: `rotate(${angle}deg)` }">
+				<span></span>
+			</div>
+		</div>
+		<div class="input">
+			<input type="number" v-model="angle" @input="onInput" @change="onChange" />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, watch } from "vue";
+	import { calculateAngle } from "../../utils/helper";
+	// Props
+	const props = defineProps({
+		angle: {
+			type: Number,
+			default: 0,
+		},
+	});
+	const emit = defineEmits(["change", "input"]);
+	const angle = ref(props.angle);
+	watch(() => props.angle, (value) => {
+		angle.value = value;
+	});
+	const dishRef = ref<HTMLDivElement>();
+	const mousedown = (e: MouseEvent | TouchEvent) => {
+		const mousemove = (e: MouseEvent | TouchEvent) => {
+			if (!dishRef.value) return;
+			const { left, top, width, height } =
+				dishRef.value.getBoundingClientRect();
+			const centerX = left + width / 2;
+			const centerY = top + height / 2;
+			const { clientX, clientY } = e?.touches?.[0] || e;
+			angle.value = calculateAngle(centerX, centerY, clientX, clientY, true);
+			onInput();
+		};
+		mousemove(e);
+		const mouseup = () => {
+			onChange();
+			document.removeEventListener("mousemove", mousemove);
+			document.removeEventListener("touchmove", mousemove);
+			document.removeEventListener("mouseup", mouseup);
+			document.removeEventListener("touchend", mouseup);
+		};
+		document.addEventListener("mousemove", mousemove);
+		document.addEventListener("touchmove", mousemove);
+		document.addEventListener("mouseup", mouseup);
+		document.addEventListener("touchend", mouseup);
+	};
+	const onInput = () => emit("input", angle.value);
+	var changeTime: any = null;
+	const onChange = () => {
+		clearTimeout(changeTime);
+		changeTime = setTimeout(() => emit("change", angle.value), 500);
+	};
+	// var angleTime = null;
+	// watch(angle, (value) => {
+	// 	emit("input", value);
+	// 	clearTimeout(angleTime);
+	// 	angleTime = setTimeout(() => emit("change", value), 50);
+	// });
+	// defineExpose({
+	// 	open,
+	// 	close,
+	// });
+</script>
+
+<style scoped lang="less">
+	.angle-tool {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		> .dish {
+			width: 24px;
+			height: 24px;
+			border: 1px solid #000;
+			border-radius: 50%;
+			cursor: pointer;
+			> .pointer {
+				pointer-events: none;
+				user-select: none;
+				position: relative;
+				width: 100%;
+				height: 100%;
+				> span {
+					position: absolute;
+					top: 10%;
+					left: 50%;
+					transform: translate(-50%, 0);
+					width: 35%;
+					height: 35%;
+					background-color: #000;
+					border-radius: 50%;
+				}
+			}
+		}
+		> .input {
+			margin-left: 5px;
+			font-size: 14px;
+			color: #000;
+			flex: 1;
+			// min-width: 45px;
+			// max-width: 80px;
+			// width: 50px;
+			> input {
+				width: 100%;
+				border-radius: 3px;
+				outline: none;
+			}
+		}
+	}
+</style>