打勾显隐选区

src/components/Spray.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, useTemplateRef } from "vue";
+import { onMounted, useTemplateRef, watch } from "vue";
 import { BehaviorSubject, distinctUntilChanged, skip } from "rxjs";
 import gripper from "@/assets/gripper.png";
 
@@ -36,12 +36,19 @@ const props = defineProps<{
 	columns: number;
 	rows: number;
 	cellNum: number;
+	hideGripper?: boolean;
 }>();
 
 const emit = defineEmits<{
 	(e: "selectArea", area: GridArea): void;
 }>();
 
+watch(
+	() => props.hideGripper,
+	val => {
+		draw(selectArea);
+	}
+);
 const canvas = useTemplateRef("cnv");
 const primaryLineColor = "rgb(203,213,245)";
 const subLineColor = "rgb(226,231,232)";
@@ -80,7 +87,7 @@ moveSubject
 		} else if (touchedElem === "Gripper") {
 			newArea = applyIncrement(val, selectArea);
 		}
-        newArea && emit("selectArea", newArea);
+		newArea && emit("selectArea", newArea);
 		newArea && draw(newArea);
 	});
 
@@ -204,6 +211,7 @@ function drawDragLayer(ctx: CanvasRenderingContext2D, area: GridArea) {
 
 function handleStart(event: MouseEvent | TouchEvent) {
 	event.stopPropagation();
+	if (!!props.hideGripper) return;
 	if ("touches" in event) {
 		const touchEvent = event.touches[0];
 		touchPoint.x = touchEvent.pageX - canvas.value!.offsetLeft;
@@ -268,10 +276,14 @@ function draw(area: GridArea) {
 		if (!imgLoaded) {
 			gripperImg.onload = () => {
 				imgLoaded = true;
-				drawDragLayer(ctx, area);
+				if (!props.hideGripper) {
+					drawDragLayer(ctx, area);
+				}
 			};
 		} else {
-			drawDragLayer(ctx, area);
+			if (!props.hideGripper) {
+				drawDragLayer(ctx, area);
+			}
 		}
 	}
 }

src/views/SprayView.vue

@@ -63,6 +63,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '0')"
 						@select-area="area => onSelectArea(area, 0)" />
 					<Spray
 						:width="210"
@@ -74,6 +75,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '1')"
 						@select-area="area => onSelectArea(area, 1)" />
 					<Spray
 						:width="210"
@@ -85,6 +87,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '2')"
 						@select-area="area => onSelectArea(area, 2)" />
 					<Spray
 						:width="210"
@@ -96,6 +99,7 @@
 						:columns="1"
 						:rows="3"
 						:cell-num="25"
+						:hideGripper="!checked.find(c => c === '3')"
 						@select-area="area => onSelectArea(area, 3)" />
 				</section>