detail submit preview完善

src/component/Detail/detailRight/overallSetting/RepeatSetting.vue

@@ -1,9 +1,11 @@
 <template>
 	<div class="repeat-setting">
+		{{  }}
 		<div class="repeat-setting-item">
 			<span class="label">{{ t("Canvas.angle") }}</span>
 			<angle-tool
 				:angle="angle"
+				styleType="2"
 				@input="(e) => emit('inputFillAngle', e)"
 			/>
 		</div>
@@ -52,9 +54,9 @@
 		<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)"
+				:top="offset[1]"
+				:left="offset[0]"
+				@input="inputOffset"
 				@change="(e) => emit('changeFillOffset', e)"
 			/>
 		</div>
@@ -74,15 +76,38 @@
 			required: true,
 			type: Object,
 		},
+		sketchPath: {
+			required: true,
+			type: String,
+		},
 	});
 	const angle = computed(() => props.object?.angle || 0);
 	const scale = computed(() => {
 		// let scaleValue = props.object?.scale/10;
 		// return props.object?.scale/10;
-		return props.object?.scale
+		return props.object?.scale[0] * 100;
 	});
-	const gapX = computed(() => props.object?.gapX || 0);
-	const gapY = computed(() => props.object?.gapY || 0);
+	const offset = ref([0,0])
+	const sketchSize:any = async ()=>{
+		let img = new Image();
+		let size = [0,0];
+		img.src = props.sketchPath;	
+		await new Promise((resolve, reject) => {
+			img.onload = () => {
+				size = [img.width, img.height]
+				resolve([img.width, img.height]);
+			}
+			img.onerror = reject;
+		});
+		return size
+	}
+	watch (() => props.object.path || props.object.location, async () => {
+		let size = await sketchSize();
+		offset.value[0] = props.object.location[0] / size[0] * 100;
+		offset.value[1] = props.object.location[1] / size[1] * 100;
+	},{immediate: true})
+	const gapX = computed(() => props.object.object?.gapX || 0);
+	const gapY = computed(() => props.object.object?.gapY || 0);
 	const emit = defineEmits([
 		"inputFillAngle",
 		"changeFillAngle",
@@ -94,9 +119,13 @@
 		"changeFill_Gap",
 	]);
 	const inputFillScale = (e) => {
-		// const scale = e * 10;
-		emit("inputFillScale", e);
+		const scale = e / 100;
+		console.log(scale)
+		emit("inputFillScale", scale);
 	};
+	const inputOffset = async (e:any)=>{
+		emit('inputFillOffset', {...e,size: await sketchSize()})
+	}
 </script>
 
 <style scoped lang="less">