选择vtk 元素

src/control/vtkModel.js

@@ -14,8 +14,12 @@ import {
   FieldDataTypes,
   FieldAssociations,
 } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
+
+
 import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
 
+import vtkSphereMapper from '@kitware/vtk.js/Rendering/Core/SphereMapper';
 
 export class VtkModel {
   constructor() {
@@ -25,37 +29,35 @@ export class VtkModel {
 
     //模板数据
     this.polyData = vtkPolyData.newInstance();
-    
     this.mapper = vtkMapper.newInstance();
     this.actor = vtkActor.newInstance();
     this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
     this.actor.getProperty().setColor([0,0.0,1]);
-   
     this.mapper.setInputData(this.polyData);
     this.actor.setMapper(this.mapper);
-    this.renderer.addActor(this.actor);
+    // this.renderer.addActor(this.actor);
+
+
+ 
 
     //点数据
-    this.actor2 = vtkActor.newInstance();
-    this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
-    this.actor2.getProperty().setColor([2,0,0]);
-    this.actor2.getProperty().setPointSize(2);
-    this.actor2.setMapper(this.mapper);  
-    this.renderer.addActor(this.actor2);
+    // this.actor2 = vtkActor.newInstance();
+    // this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
+    // this.actor2.getProperty().setColor([2,0,0]);
+    // this.actor2.getProperty().setPointSize(2);
+    // this.actor2.setMapper(this.mapper);  
+    // this.renderer.addActor(this.actor2);
 
-    //选取
-    this.interactor = this.renderer.getRenderWindow().getInteractor();
-    this.apiSpecificRenderWindow = this.interactor.getView();
-    this.hardwareSelector = this.apiSpecificRenderWindow.getSelector();
+    // const sphereSource = vtkSphereSource.newInstance({
+    //   center: [0, 0, 0],
+    //   height: 1.0,
+    // });
+    // sphereSource.setThetaResolution(64);
+    // sphereSource.setPhiResolution(32);
 
-    this.hardwareSelector.setCaptureZValues(true);
-    // TODO: bug in FIELD_ASSOCIATION_POINTS mode
-    // hardwareSelector.setFieldAssociation(
-    //   FieldAssociations.FIELD_ASSOCIATION_POINTS
-    // );
-    this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
 
 
+  
     // this.pointerSource = vtkSphereSource.newInstance({
     //   phiResolution: 15,
     //   thetaResolution: 15,
@@ -86,6 +88,18 @@ export class VtkModel {
     this.jgMapper.setLookupTable(ctf);
     const lut = this.jgMapper.getLookupTable();
     this.scalarBarActor.setScalarsToColors(lut);
+
+    //选取
+    this.lastActor=null;
+    this.nodeActors =[]; //节点actor 数据
+    this.pipeActors =[]; //管道actor 数据
+    this.interactor = this.renderer.getRenderWindow().getInteractor();
+    this.apiSpecificRenderWindow = this.interactor.getView();
+    this.hardwareSelector = this.apiSpecificRenderWindow.getSelector();
+    this.hardwareSelector.setCaptureZValues(true);
+    this.hardwareSelector.setFieldAssociation(FieldAssociations.FIELD_ASSOCIATION_POINTS);
+    // document.removeEventListener("mousemove", throttleMouseHandler);
+    
   }
   generateTicks(numberOfTicks) {
     return (helper) => {
@@ -110,18 +124,98 @@ export class VtkModel {
   clearModeAddJg(){
     this.renderer.addActor(this.jgActor);
     this.renderer.addActor(this.scalarBarActor);
+
+    this.nodeActors.forEach((nodeActor) => {
+      this.renderer.removeActor(nodeActor.actor);
+    });
+    this.pipeActors.forEach((pipeActor) => {
+      this.renderer.removeActor(pipeActor.actor);
+   });
     this.renderer.removeActor(this.actor);
-    this.renderer.removeActor(this.actor2);
   }
   clearJgAddMode(){
     this.renderer.addActor(this.actor);
-    this.renderer.addActor(this.actor2);
+    this.nodeActors.forEach((nodeActor) => {
+      this.renderer.addActor(nodeActor.actor);
+    });
+    this.pipeActors.forEach((pipeActor) => {
+      this.renderer.addActor(pipeActor.actor);
+   });
     this.renderer.removeActor(this.scalarBarActor);
     this.renderer.removeActor(this.jgActor);
   } 
 
 }
 
+function pickOnMouseEvent(event) {
+  if (vtkmodel.interactor.isAnimating()) {
+    // We should not do picking when interacting with the scene
+    return;
+  }
+  const [x, y] = eventToWindowXY(event);
+  // console.log([x,y]);
+  // vtkmodel.pointerActor.setVisibility(false);
+  vtkmodel.hardwareSelector
+    .getSourceDataAsync(vtkmodel.renderer, x, y, x, y)
+    .then((result) => {
+      if (result) {
+        processSelections(result.generateSelection(x, y, x, y));
+        // processSelections(result.generateSelection(x, y, x, y));
+      } else {
+        // processSelections(null);
+      }
+    });
+}
+function eventToWindowXY(event) {
+  // We know we are full screen => window.innerXXX
+  // Otherwise we can use pixel device ratio or else...
+  const { clientX, clientY } = event;
+  const [width, height] = vtkmodel.apiSpecificRenderWindow.getSize();
+  const x = Math.round((width * clientX) / window.innerWidth);
+  const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y
+  return [x, y];
+}
+function processSelections(selections) {
+  if (!selections || selections.length === 0) {//没有选择
+    if(vtkmodel.lastActor==null){
 
+    }else{
+      vtkmodel.lastActor.getProperty().setColor(WHITE);
+      vtkmodel.renderWindow.render();
+    }
+    vtkmodel.lastActor=null;
+    return;
+  }
+ 
+  const {
+    worldPosition: rayHitWorldPosition,
+    compositeID,
+    prop,
+    propID,
+    attributeID,
+  } = selections[0].getProperties();
+  const input = prop.getMapper().getInputData();
+  if(vtkmodel.lastActor!=null){
+    vtkmodel.lastActor.getProperty().setColor(WHITE);
+    vtkmodel.renderWindow.render();
+  }
+  vtkmodel.lastActor=prop;
+  prop.getProperty().setColor(GREEN);
+  vtkmodel.nodeActors.forEach((nodeActor) => {
+     if(prop==nodeActor.actor){
+      //  console.log(nodeActor.node);
+    
+     }
+   });
+   vtkmodel.pipeActors.forEach((pipeActor) => {
+   if(prop==pipeActor.actor){
+       console.log(pipeActor.pipe);
+     }
+  });
+    vtkmodel.renderWindow.render();
+}
+const throttleMouseHandler = throttle(pickOnMouseEvent, 20);
+const WHITE = [1, 1, 1];
+const GREEN = [0.1, 0.8, 0.1];
 const vtkmodel = new VtkModel();
 export { vtkmodel };

src/view/components/InfoVtkmodel.vue

@@ -4,18 +4,25 @@ import { ref, onMounted, reactive } from "vue";
 import { RouterView, RouterLink } from "vue-router";
 import { request, uploadFile } from "@/utils/request";
 import { vtkmodel } from "@/control/vtkModel.js";
-import { throttle } from '@kitware/vtk.js/macros';
+import { throttle } from "@kitware/vtk.js/macros";
+import vtkSphereSource from "@kitware/vtk.js/Filters/Sources/SphereSource";
+import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
+import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
+import vtkLineSource from '@kitware/vtk.js/Filters/Sources/LineSource';
+import vtkPointSource from '@kitware/vtk.js/Filters/Sources/PointSource';
 
 onMounted(() => {
   readNodeAndPipe();
-  // const throttleMouseHandler = throttle(pickOnMouseEvent, 20);
-  // document.addEventListener('mousemove', throttleMouseHandler);
-
+  vtkmodel.clearJgAddMode();
 });
 const nodes = ref([]); //节点数据
 const pipes = ref([]); //管道数据
 const delNodes = ref([]); //无效节点
 const validNodes = ref([]); //有效节点
+
+
+
+
 async function readNodeAndPipe() {
   const params = {
     transCode: "D00000",
@@ -57,49 +64,6 @@ async function readePipe() {
     .catch((err) => {});
 }
 
-function pickOnMouseEvent(event) {
-  if (vtkmodel.interactor.isAnimating()) {
-    // We should not do picking when interacting with the scene
-    return;
-  }
-  const [x, y] = eventToWindowXY(event);
-  // console.log([x,y]);
-  // vtkmodel.pointerActor.setVisibility(false);
-  vtkmodel.hardwareSelector.getSourceDataAsync(vtkmodel.renderer, x, y, x, y).then((result) => {
-    if (result) {
-      processSelections(result.generateSelection(x, y, x, y));
-      // processSelections(result.generateSelection(x, y, x, y));
-    } else {
-      // processSelections(null);
-    }
-  });
-}
-function eventToWindowXY(event) {
-  // We know we are full screen => window.innerXXX
-  // Otherwise we can use pixel device ratio or else...
-  const { clientX, clientY } = event;
-  const [width, height] = vtkmodel.apiSpecificRenderWindow.getSize();
-  const x = Math.round((width * clientX) / window.innerWidth);
-  const y = Math.round(height * (1 - clientY / window.innerHeight)); // Need to flip Y
-  return [x, y];
-}
-function processSelections(selections) {
-    if (!selections || selections.length === 0) {
-    return;
-  }
-  const {
-    worldPosition: rayHitWorldPosition,
-    compositeID,
-    prop,
-    propID,
-    attributeID,
-  } = selections[0].getProperties();
-  console.log(rayHitWorldPosition);
-  prop.getProperty().setColor([0.1, 0.8, 0.1]);
-}
-
-
-
 
 /**
  * 在管道中已存在的点才可以使用
@@ -125,14 +89,15 @@ function indexIdByPipeNodeId(nid) {
     }
   }
   return 0;
-  // let index = 0;
-  // validNodes.value.forEach((node) => {
-  //   if(node.id == nid) {
-  //     return index;
-  //   }
-  //   index++;
-  // });
-  // return index;
+}
+function pointByPipeNodeId(nid) {
+  for (let index = 0; index < validNodes.value.length; index++) {
+    const node = validNodes.value[index];
+    if (node.id == nid) {
+      return [parseFloat(node.x), parseFloat(node.y), parseFloat(node.z)];
+    }
+  }
+  return 0;
 }
 
 function lineShow() {
@@ -148,16 +113,16 @@ function lineShow() {
       validNodes.value.push(node);
     }
   });
-  validNodes.value.forEach((node) => {
-    // console.log(node);
-    points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
-  });
-  pipes.value.forEach((pipe) => {
-    let sid = indexIdByPipeNodeId( pipe.snId);
-    let eid = indexIdByPipeNodeId( pipe.enId);
-    // console.log(pipe.snId-1, pipe.enId-1,":",sid, eid);
-    lines.insertNextCell([sid,eid]);
-  });
+  // validNodes.value.forEach((node) => {
+  //   // console.log(node);
+  //   points.insertNextPoint(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
+  // });
+  // pipes.value.forEach((pipe) => {
+  //   let sid = indexIdByPipeNodeId(pipe.snId);
+  //   let eid = indexIdByPipeNodeId(pipe.enId);
+  //   // console.log(pipe.snId-1, pipe.enId-1,":",sid, eid);
+  //   lines.insertNextCell([sid, eid]);
+  // });
 
   // points.insertNextPoint(1, 0, 0);
   // points.insertNextPoint(0, 1, 0);
@@ -166,6 +131,50 @@ function lineShow() {
   // lines.insertNextCell([1, 2]);
   // lines.insertNextCell([2, 0]);
 
+  const sphereSource = vtkSphereSource.newInstance({
+    center: [0, 0, 0],
+    radius: 4.0,
+  });
+  // sphereSource.setThetaResolution(64);
+  // sphereSource.setPhiResolution(32);
+
+  const mapper = vtkMapper.newInstance();
+  mapper.setInputConnection(sphereSource.getOutputPort());
+  validNodes.value.forEach((node) => {
+     const actor = vtkActor.newInstance();
+    actor.setMapper(mapper);
+    actor.setPosition(parseFloat(node.x), parseFloat(node.y), parseFloat(node.z));
+    vtkmodel.renderer.addActor(actor);
+    const nodeActor={};
+    nodeActor.node =node;
+    nodeActor.actor=actor;
+    vtkmodel.nodeActors.push(nodeActor);
+  });
+
+  pipes.value.forEach((pipe) => {
+    const lineSource = vtkLineSource.newInstance();
+    let point1 = pointByPipeNodeId(pipe.snId);
+    let point2 = pointByPipeNodeId(pipe.enId);
+    //  console.log(point1,":",point2);
+    // lines.insertNextCell([sid, eid]);
+    lineSource.setPoint1(point1);
+    lineSource.setPoint2(point2);
+    lineSource.setResolution(12);
+    const actor = vtkActor.newInstance();
+    const mapper = vtkMapper.newInstance();
+    actor.setMapper(mapper);
+    actor.getProperty().setLineWidth(3);//设置线宽
+    // actor.getProperty().setColor(WHITE);//设置线宽
+
+    mapper.setInputConnection(lineSource.getOutputPort());
+    vtkmodel.renderer.addActor(actor);
+
+    const pipeActor={};
+    pipeActor.pipe =pipe;
+    pipeActor.actor=actor;
+    vtkmodel.pipeActors.push(pipeActor);
+  });
+
   vtkmodel.renderer.resetCamera();
   vtkmodel.renderWindow.render();
 }
@@ -176,4 +185,8 @@ function lineShow() {
   z-index: 150;
   top: 70px;
 }
+span {
+  position: absolute;
+  top: 2px;
+}
 </style>