增加非产品层的点击

src/views/home/index.vue

@@ -108,8 +108,9 @@ const update_and_modify_product = reactive({
   inPaintPrompt: "",
   cutout_obj: <Wm.Coordinate[]>[],
   cutout_no_obj: <Wm.Coordinate[]>[],
+  cutoutPart: "1",
 });
-
+const radio1 = ref('1')
 
 onMounted(() => {
   // 初始化task_id
@@ -1677,6 +1678,12 @@ const showUploadAndModifyProductPicInPaintDialog = () => {
     const preview_canvas = document.getElementById('update_and_modify_product_previewCanvas') as HTMLCanvasElement;
     const mask_canvas = document.getElementById('update_and_modify_product_maskCanvas') as HTMLCanvasElement;
     const clearButton = document.getElementById('update_and_modify_product_clearButton') as HTMLButtonElement;
+    const no_obj_checkbox = document.getElementById('update_and_modify_product_noObjCheckbox') as HTMLInputElement;
+    const mask_canvas2 = document.getElementById('update_and_modify_product_maskCanvas2') as HTMLCanvasElement;
+    // 初始化非产品层
+    no_obj_checkbox.checked = false;
+    mask_canvas2.style.zIndex = '3';
+
     if (base_canvas && preview_canvas && mask_canvas) {
       // 基础图
       let base_ctx = base_canvas.getContext('2d') as CanvasRenderingContext2D;
@@ -1713,32 +1720,74 @@ const showUploadAndModifyProductPicInPaintDialog = () => {
       mask_ctx.lineJoin = 'round'; // 拐点为圆形，默认是尖角
       mask_ctx.globalCompositeOperation = 'copy';
 
+      // 非产品层mask
+      let mask_ctx2 = mask_canvas2.getContext('2d') as CanvasRenderingContext2D;
+      mask_ctx2.clearRect(0, 0, mask_canvas2.width, mask_canvas2.height);
+      mask_ctx2.lineWidth = 40; // 设置线条粗细
+      mask_ctx2.strokeStyle = 'rgba(255, 0, 0, 1)'; // 设置线条颜色
+      mask_ctx2.lineCap = 'round';  // 线头尾为圆形
+      mask_ctx2.lineJoin = 'round'; // 拐点为圆形，默认是尖角
+      mask_ctx2.globalCompositeOperation = 'copy';
+
       if (!if_binded_events) {
-        // 鼠标或触摸事件开始绘制
-        mask_canvas.addEventListener('mousedown', startDrawing);
-        // 清除按钮点击事件
-        clearButton.addEventListener('click', clearCanvas);
+        // 点选产品事件
+        mask_canvas.addEventListener('mousedown', onClickObj);
+        // 重置按钮点击事件
+        clearButton.addEventListener('click', resetCanvas);
+        // 复选框事件
+        no_obj_checkbox.addEventListener('click', onClickNoObjCheckbox);
+        // 点选非产品事件
+        mask_canvas2.addEventListener('mousedown', onClickNoObj);
         // 每次打开都会再绑定一次，这里防止多次绑定，否则数据会重复
         if_binded_events = true;
       }
 
-      // 开始绘制
-      function startDrawing(e: any) {
-          // isDrawing = true;
+      // 点选产品
+      function onClickObj(e: any) {
           mask_ctx.beginPath();
           const { offsetX, offsetY } = getOffset(e);
           mask_ctx.moveTo(offsetX, offsetY);
           mask_ctx.lineTo(offsetX, offsetY);
           mask_ctx.stroke();
-          console.log(offsetX, offsetY);
-          // 清空再push，保证里面只有一个点
+          console.log('obj==>', offsetX, offsetY);
+          // 先清空再push，保证里面只有一个点
           update_and_modify_product.cutout_obj = <Wm.Coordinate[]>[];
           update_and_modify_product.cutout_obj.push({x: offsetX, y: offsetY})
       }
-      // 清除画布
-      function clearCanvas() {
-        mask_ctx.clearRect(0, 0, mask_canvas.width, mask_canvas.height);
+
+      // 点选产品
+      function onClickNoObj(e: any) {
+          mask_ctx2.beginPath();
+          const { offsetX, offsetY } = getOffset(e);
+          mask_ctx2.moveTo(offsetX, offsetY);
+          mask_ctx2.lineTo(offsetX, offsetY);
+          mask_ctx2.stroke();
+          console.log('no-obj==>', offsetX, offsetY);
+          // 先清空再push，保证里面只有一个点
+          update_and_modify_product.cutout_no_obj = <Wm.Coordinate[]>[];
+          update_and_modify_product.cutout_no_obj.push({x: offsetX, y: offsetY})
+      }
+
+      // 重置
+      function resetCanvas() {
+        update_and_modify_product.pic_preview = '';
+        update_and_modify_product.pic_preview_local = '';
+        update_and_modify_product.inPaintVisible = false; // 关闭对话框
+        showUploadAndModifyProductPicInPaintDialog();  // 再打开对话框进行预览
+      }
+
+      // checkbox点击事件
+      function onClickNoObjCheckbox() {
+        if(no_obj_checkbox.checked) {
+          mask_canvas2.style.zIndex = '5';
+        } else {
+          mask_canvas2.style.zIndex = '3';
+        }
+        const computedStyle = window.getComputedStyle(mask_canvas2);
+        const currentZIndex = computedStyle.getPropertyValue('z-index');
+        console.log('Current z-index:', currentZIndex);
       }
+
       // 获取鼠标的偏移量
       function getOffset(e: any) {
           // console.log(e)
@@ -1767,7 +1816,7 @@ const onSubmitUploadAndModifyProductPicCutOut = async () => {
   }
   if (update_and_modify_product.cutout_obj.length==0) {
     ElMessage({
-      message: "没有产品坐标，请在图片上点击产品！",
+      message: "没有产品坐标，至少要点击产品！",
       type: "error",
     });
     return;
@@ -1809,7 +1858,6 @@ const onSubmitUploadAndModifyProductPicCutOut = async () => {
   } finally {
     update_and_modify_product.inPaintVisible = false; // 关闭对话框
     showUploadAndModifyProductPicInPaintDialog();  // 再打开对话框进行预览
-    // update_and_modify_product.inPaintVisible = true;
   }
 }
 
@@ -2781,7 +2829,11 @@ const onSubmitUploadAndModifyProductPicInPaint = async () => {
       :close-on-press-escape="true"
       :lock-scroll="true"
     >
-      <div style="color: red">请在图片上点击产品部分</div>
+      <div style="color: red">
+        先在图片上点击产品部分 ==> 点击智能抠图，预览效果 ==> 如效果不理想，则勾选此项
+        <input type="checkbox" id="update_and_modify_product_noObjCheckbox" />
+        ，再点击非产品部分，抠图，直到满意。
+      </div>
       <div
         ref="update_and_modify_product_inpaint"
         :style="
@@ -2805,19 +2857,19 @@ const onSubmitUploadAndModifyProductPicInPaint = async () => {
           style="position: absolute; left: 0; top: 0; z-index: 2; background: none"
         ></canvas>
         <canvas
-          id="update_and_modify_product_maskCanvas"
+          id="update_and_modify_product_maskCanvas2"
           :width="form.img_size.width"
           :height="form.img_size.height"
           style="position: absolute; left: 0; top: 0; z-index: 3; background: none"
         ></canvas>
-        <!-- <canvas
-          id="update_and_modify_product_mask2Canvas"
+        <canvas
+          id="update_and_modify_product_maskCanvas"
           :width="form.img_size.width"
           :height="form.img_size.height"
           style="position: absolute; left: 0; top: 0; z-index: 4; background: none"
-        ></canvas> -->
+        ></canvas>
       </div>
-      <button id="update_and_modify_product_clearButton">清除坐标</button>
+      <button id="update_and_modify_product_clearButton">重置</button>
       <el-button @click="onSubmitUploadAndModifyProductPicCutOut">智能抠图</el-button>
       <div>
         <span>画面描述：</span>