feat(draw): add footer_label

src/core/box/BoxManager.js

@@ -1,6 +1,8 @@
 import * as THREE from "three";
 import HorizontalBox from "./horizontalBox";
 import VerticalBox from "./VerticalBox";
+import SimpleLabel from "./object/SimpleLabel";
+
 export default class BoxManager {
   constructor(scene) {
     this.scene = scene;
@@ -17,19 +19,21 @@ export default class BoxManager {
 
   load = (list, type) => {
     console.log("this.model.name", this.model.name);
+    const total = list.length;
     list.forEach((item, index) => {
       if (type === 1) {
         //横排
         console.log("横排");
-        const box = new HorizontalBox(this, item, index);
+        const box = new HorizontalBox(this, item, index, total);
         this.model.add(box);
       }
       if (type === 2) {
         //竖排
-        const box = new VerticalBox(this, item, index);
+        const box = new VerticalBox(this, item, index, total);
         // console.log("竖排");
         this.model.add(box);
       }
+
     });
 
     this.scene.scene.add(this.model);

src/core/box/HorizontalBox.js

@@ -1,14 +1,15 @@
 import * as THREE from "three";
 import TextLabel from "./object/TextLabel";
+import SimpleLabel from "./object/SimpleLabel";
 import ImgLabel from "./object/ImgLabel";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 export default class HorizontalBox extends THREE.Group {
-  constructor(manager, data, index) {
+  constructor(manager, data, index, total) {
     super();
     this.manager = manager;
     this.name = "horizontal_box";
-
+    this.total = total;
     this.getStyle();
     this.load(data, index);
   }
@@ -48,7 +49,6 @@ export default class HorizontalBox extends THREE.Group {
     data.forEach((i, j) => {
       //img
       let img;
-
       this.manager.loader.load(i.imgUrl, (texture) => {
         texture.colorSpace = THREE.SRGBColorSpace;
         img = new ImgLabel(texture, matLine);
@@ -57,7 +57,7 @@ export default class HorizontalBox extends THREE.Group {
         if (j === 0) {
           img.position.z -= 0.8;
         } else {
-          img.position.z += 0.5;
+          img.position.z += 0.43;
         }
         this.add(img);
         this.manager.imgList.push(img);
@@ -67,5 +67,12 @@ export default class HorizontalBox extends THREE.Group {
         textlabel.position.z += textlabel.scale.z * 0.5 + 0.1;
       });
     });
+    //页脚
+    const f_txt_label = ` 第 ${index + 1} 页  共 ${this.total} 页`;
+    const footlabel = new SimpleLabel(f_txt_label, true);
+    footlabel.renderOrder = 100;
+    footlabel.position.z += 1.26;
+
+    this.add(footlabel);
   }
 }

src/core/box/VerticalBox.js

@@ -1,12 +1,14 @@
 import * as THREE from "three";
 import TextLabel from "./object/TextLabel";
 import ImgLabel from "./object/ImgLabel";
+import SimpleLabel from "./object/SimpleLabel";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial.js";
 
 export default class VerticalBox extends THREE.Group {
-  constructor(manager, data, index) {
+  constructor(manager, data, index, total) {
     super();
     this.manager = manager;
+    this.total = total;
     this.name = "horizontal_box";
     this.getStyle();
     this.load(data, index);
@@ -63,5 +65,13 @@ export default class VerticalBox extends THREE.Group {
         textlabel.position.z += textlabel.scale.z * 0.5 + 0.1;
       });
     });
+
+    //页脚
+    const f_txt_label = ` 第 ${index + 1} 页  共 ${this.total} 页`;
+    const footlabel = new SimpleLabel(f_txt_label, true);
+    footlabel.renderOrder = 100;
+    footlabel.position.z += 1.26;
+
+    this.add(footlabel);
   }
 }

src/core/box/object/SimpleLabel.js

@@ -0,0 +1,47 @@
+import * as THREE from "three";
+
+export default class SimpleLabel extends THREE.Mesh {
+  constructor(text, outline) {
+    let res = 5;
+    const width = 150 * res;
+    const height = 15 * res;
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    let fontFamily = "Arial";
+    let fontSize = 5.2 * res;
+    let offsetX = 75 * res;
+    let offsetY = 10 * res;
+    var context = canvas.getContext("2d");
+
+    context.fillStyle = "#ffffff";
+    context.rect(0, 0, width, height);
+    context.fill();
+    context.font = "normal " + fontSize + "px " + fontFamily;
+    context.fillStyle = "#000000";
+    context.textAlign = "center";
+    context.fillText(text, offsetX, offsetY);
+    const canvas_map = new THREE.Texture(canvas);
+    canvas_map.colorSpace = THREE.SRGBColorSpace;
+    canvas_map.needsUpdate = true;
+    canvas_map.anisotropy = 4;
+
+    const g = new THREE.PlaneGeometry(1.5, 0.15);
+    g.rotateX(-Math.PI / 2);
+
+    const m = new THREE.MeshBasicMaterial({
+      map: canvas_map,
+    });
+    super(g, m);
+
+    // const edges = new THREE.EdgesGeometry(g);
+    // const line = new THREE.LineSegments(
+    //   edges,
+    //   new THREE.LineBasicMaterial({ color: 0xcccccc })
+    // );
+    // line.position.y += 0.5;
+    // this.add(line);
+
+    this.name = "SimpleLabel_" + text;
+  }
+}

src/core/player/Player.js

@@ -123,7 +123,13 @@ export default class Player {
       this.renderLines.push(points);
       this.scene.scene.add(finishLine);
       const imageId = this.touchImg.object.userData;
-      console.log("this.touchImg", dir, imageId, points);
+      const activeLineItem = {
+        id: imageId,
+        dir: [dir],
+      };
+      console.log("this.touchImg", activeLineItem, points);
+      this.insertActiveEdge(activeLineItem);
+      this.showAllActiveEdges();
     }
   };
 
@@ -229,6 +235,27 @@ export default class Player {
     this.activeEdge.visible = true;
     this.buildLine();
   };
+  insertActiveEdge(item) {
+    const exist = this.activeEdges.find((s) => item.id === s.id);
+    if (exist) {
+      exist.dir = [...new Set([...exist.dir, ...item.dir])];
+    } else {
+      this.activeEdges.push(item);
+    }
+  }
+
+  showAllActiveEdges() {
+    let imgList = this.scene.boxManager.imgList;
+    this.activeEdges.forEach((edge) => {
+      const exist = imgList.find((item) => item.userData === edge.id);
+      // console.log("exist", exist);
+      if (exist) {
+        edge.dir.forEach((dir) => {
+          exist.touchLines.children[dir].visible = true;
+        });
+      }
+    });
+  }
 
   update = () => {
     if (this.floorplanControls.enabled) {

src/view/case/photos/index.vue

@@ -11,11 +11,12 @@
     </div>
     <div class="right">
       <div class="tools">
-        <el-button>开始标注</el-button>
-        <el-button>退出标注</el-button>
+        <el-button>标注方向</el-button>
+        <!-- <el-button>退出标注</el-button> -->
       </div>
-      <!-- <swiper
+      <swiper
         class="swiper"
+        v-show="false"
         slides-per-view="auto"
         :space-between="24"
         :centeredSlides="true"
@@ -44,8 +45,8 @@
             </div>
           </div>
         </swiper-slide>
-      </swiper> -->
-      <canvas id="canvas"></canvas>
+      </swiper>
+      <canvas id="canvas" v-show="true"></canvas>
     </div>
   </div>
 </template>