17.58

src/control/vtkModel.js

@@ -2,6 +2,8 @@ import * as d3 from "d3-scale";
 import { formatDefaultLocale } from "d3-format";
 import "@kitware/vtk.js/Rendering/Profiles/Geometry";
 import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";
+import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';
+
 import vtkActor from "@kitware/vtk.js/Rendering/Core/Actor";
 import vtkMapper from "@kitware/vtk.js/Rendering/Core/Mapper";
 import vtkScalarBarActor from "@kitware/vtk.js/Rendering/Core/ScalarBarActor";
@@ -53,20 +55,20 @@ export class VtkModel {
     this.validNodes = [];//节点数据
     this.pipes = [];//管道数据
 
-    this.renderWindowWith = vtkFullScreenRenderWindow.newInstance();
-    this.renderer = this.renderWindowWith.getRenderer();
-    this.renderWindow = this.renderWindowWith.getRenderWindow();
+    this.renderWindowWith =null;
+    this.renderer =null;
+    this.renderWindow = null;
 
-    //模板数据
-    this.polyData = vtkPolyData.newInstance();
-    this.mapper = vtkMapper.newInstance();
-    this.actor = vtkActor.newInstance();
-    this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
-    this.actor.getProperty().setColor(WHITE);
-    this.mapper.setInputData(this.polyData);
-    this.actor.setMapper(this.mapper);
+     //模板数据
+     this.polyData = vtkPolyData.newInstance();
+     this.mapper = vtkMapper.newInstance();
+     this.actor = vtkActor.newInstance();
+     this.actor.getProperty().setRepresentation(Representation.SURFACE); //线    
+     this.actor.getProperty().setColor(WHITE);
+     this.mapper.setInputData(this.polyData);
+     this.actor.setMapper(this.mapper);
 
-    //点数据
+       //点数据
     this.actor2 = vtkActor.newInstance();
     this.actor2.getProperty().setRepresentation(Representation.POINTS); //点   
     this.actor2.getProperty().setColor(WHITE);
@@ -74,6 +76,37 @@ export class VtkModel {
     this.actor2.setMapper(this.mapper);
 
 
+      //结果数据
+      this.jgActor = vtkActor.newInstance();
+      this.jgMapper = vtkMapper.newInstance();
+      this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
+  
+  
+      this.scalarBarActor = vtkScalarBarActor.newInstance();
+      this.scalarBarActor.setGenerateTicks(this.generateTicks(5));
+      this.scalarBarActor.setDrawAboveRangeSwatch(true);
+      this.scalarBarActor.setDrawNanAnnotation(false);
+      this.scalarBarActor.setBoxPosition([1, 0]);
+      // 修改设条颜色
+      const ctf = vtkColorTransferFunction.newInstance();
+      ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
+      ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
+      ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
+      ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
+      ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
+      this.jgMapper.setLookupTable(ctf);
+      const lut = this.jgMapper.getLookupTable();
+      this.scalarBarActor.setScalarsToColors(lut);
+      this.jgActor.setMapper(this.jgMapper);
+  
+  }
+
+  initMode(rootContainer){
+    this.renderWindowWith =  vtkGenericRenderWindow.newInstance();
+    this.renderWindowWith.setContainer(rootContainer);
+    this.renderer = this.renderWindowWith.getRenderer();
+    this.renderWindow = this.renderWindowWith.getRenderWindow();
+    // this.renderWindow.setTransparentBackground(true);
 
     //选取
     this.lastActor = null;
@@ -88,28 +121,6 @@ export class VtkModel {
 
     document.addEventListener("mousemove", throttleMouseHandler);
 
-    //结果数据
-    this.jgActor = vtkActor.newInstance();
-    this.jgMapper = vtkMapper.newInstance();
-    this.jgActor.getProperty().setRepresentation(Representation.SURFACE); //面    
-
-
-    this.scalarBarActor = vtkScalarBarActor.newInstance();
-    this.scalarBarActor.setGenerateTicks(this.generateTicks(5));
-    this.scalarBarActor.setDrawAboveRangeSwatch(true);
-    this.scalarBarActor.setDrawNanAnnotation(false);
-    this.scalarBarActor.setBoxPosition([1, 0]);
-    // 修改设条颜色
-    const ctf = vtkColorTransferFunction.newInstance();
-    ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
-    ctf.addRGBPoint(1.0, 0.0, 1.0, 0.5);
-    ctf.addRGBPoint(2.0, 0.0, 1.0, 0.0);
-    ctf.addRGBPoint(3.0, 1.0, 0.5, 0.0);
-    ctf.addRGBPoint(4.0, 1.0, 0.0, 0.0);
-    this.jgMapper.setLookupTable(ctf);
-    const lut = this.jgMapper.getLookupTable();
-    this.scalarBarActor.setScalarsToColors(lut);
-    this.jgActor.setMapper(this.jgMapper);
 
     
     //箭头
@@ -176,7 +187,6 @@ export class VtkModel {
     this.orientationWidget.setMinPixelSize(100);
     this.orientationWidget.setMaxPixelSize(300);
   }
-
   generateTicks(numberOfTicks) {
     return (helper) => {
       const lastTickBounds = helper.getLastTickBounds();

src/view/appmian.vue

@@ -38,7 +38,7 @@
    
     </div>
     </div>
-    <div class="vtkmodel1" id="infomodel"><InfoVtkmodel ref="vtkmodel" /></div>
+    <InfoVtkmodel ref="vtkmodel" />
      
       </el-main>
    

src/view/components/InfoVtkmodel.vue

@@ -1,4 +1,6 @@
-<template></template>
+<template>
+  <div class="vtkmodel1" id="infomodel"></div>
+</template>
 <script setup>
 import { ref, onMounted, reactive } from "vue";
 import { RouterView, RouterLink } from "vue-router";
@@ -12,6 +14,12 @@ import vtkLineSource from "@kitware/vtk.js/Filters/Sources/LineSource";
 import vtkPointSource from "@kitware/vtk.js/Filters/Sources/PointSource";
 
 onMounted(() => {
+
+  const rootContainer = document.getElementById("infomodel");
+  // rootContainer.style.position = "relative";
+  rootContainer.style.width = "100%";
+  rootContainer.style.height = "100%";
+  vtkmodel.initMode(rootContainer);
   readNodeAndPipe();
   vtkmodel.clearJgAddMode();
 });