画布增加的新功能

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue

@@ -0,0 +1,133 @@
+<template>
+	<div class="repeat-setting">
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.angle") }}</span>
+			<angle-tool
+				:angle="angle"
+				@input="(e) => emit('inputFillAngle', e)"
+				@change="(e) => emit('changeFillAngle', e)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.scale") }}</span>
+			<slider
+				:min="1"
+				:max="500"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${scale}%`"
+				:value="scale"
+				@input="inputFillScale"
+				@change="changeFillScale"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">Gap X</span>
+			<slider
+				:min="0"
+				:max="1000"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${v}px`"
+				:value="gapX"
+				@input="(e) => emit('inputFill_Gap', e, gapY)"
+				@change="(e) => emit('changeFill_Gap', e, gapY)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">Gap Y</span>
+			<slider
+				:min="0"
+				:max="1000"
+				:step="1"
+				is-input
+				:tipFormatter="(v) => `${v}px`"
+				:value="gapY"
+				@input="(e) => emit('inputFill_Gap', gapX, e)"
+				@change="(e) => emit('changeFill_Gap', gapX, e)"
+			/>
+		</div>
+		<p></p>
+		<div class="repeat-setting-item">
+			<span class="label">{{ t("Canvas.offset") }}</span>
+			<offset-tool
+				:top="(props.object.fill?.offsetY / props.object.height) * 100"
+				:left="(props.object.fill?.offsetX / props.object.width) * 100"
+				@input="(e) => emit('inputFillOffset', e)"
+				@change="(e) => emit('changeFillOffset', e)"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, defineProps, defineEmits, computed } from "vue";
+	import { getTransformScaleAngle } from "../../utils/helper";
+	import AngleTool from "../tools/AngleTool.vue";
+	import OffsetTool from "../tools/OffsetTool.vue";
+	import Slider from "../tools/Slider.vue";
+	import { useI18n } from "vue-i18n";
+	const { t } = useI18n();
+
+	const props = defineProps({
+		object: {
+			required: true,
+			type: Object,
+		},
+	});
+	const angle = computed(
+		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
+	);
+	const scale = computed(() => {
+		const patternTransform = props.object.fill?.patternTransform;
+		const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
+		return Number(Number(scaleValue).toFixed(2));
+	});
+	const gapX = computed(() => props.object.fill_?.gapX || 0);
+	const gapY = computed(() => props.object.fill_?.gapY || 0);
+	const emit = defineEmits([
+		"inputFillAngle",
+		"changeFillAngle",
+		"inputFillOffset",
+		"changeFillOffset",
+		"inputFillScale",
+		"changeFillScale",
+		"inputFill_Gap",
+		"changeFill_Gap",
+	]);
+	const inputFillScale = (e) => {
+		const scale = e / 100;
+		emit("inputFillScale", scale);
+	};
+	const changeFillScale = (e) => {
+		const scale = e / 100;
+		emit("changeFillScale", scale);
+	};
+</script>
+
+<style scoped lang="less">
+	.repeat-setting {
+		user-select: none;
+		> .repeat-setting-item {
+			display: flex;
+			align-items: center;
+			//虚线
+			> .label {
+				min-width: 50px;
+				font-size: 14px;
+			}
+			> .angle-tool {
+				width: 120px;
+			}
+		}
+		> p {
+			margin: 10px 0;
+			width: 100%;
+			height: 0;
+			border-bottom: 1px dashed #e5e5e5;
+		}
+	}
+</style>