切换显示

src/components/HelloWorld.vue

@@ -1,14 +1,18 @@
 <template>
   <div>
+    <div>
+    <button @click="increment">Count is: {{ count }}</button>
+    <button @click="inOpacity">透明度： {{ opacity }}</button>
+    </div>
     <div id="vtkContainer" />
    
   </div>
-</template>
+</template >
 
-<script>
+<script setup>
 import * as d3 from 'd3-scale';
 import { formatDefaultLocale } from 'd3-format';
-import { onMounted } from 'vue';
+import { ref,onMounted } from 'vue';
 import '@kitware/vtk.js/Rendering/Profiles/Geometry';
 import vtkRenderWindowWithControlBar from '@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar';
 import vtkActor           from '@kitware/vtk.js/Rendering/Core/Actor';
@@ -18,136 +22,183 @@ import vtkScalarBarActor from '@kitware/vtk.js/Rendering/Core/ScalarBarActor';
 import vtkLookupTable from '@kitware/vtk.js/Common/Core/LookupTable';
 import vtkDataArray from '@kitware/vtk.js/Common/Core/DataArray.js';
 import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction';
+// 响应式状态
+const count = ref(0);
+const opacity = ref(0.1);
 
-export default {
-  name: 'HelloWorld',
-  //体制
-  setup() {
-    //安装时
-    onMounted(() => {
-      const rootContainer =document.getElementById("vtkContainer");
-      rootContainer.style.position = 'relative';
-      rootContainer.style.width = '1000px';
-      rootContainer.style.height = '500px';
-      console.log("rootContainer:",rootContainer);    
-      const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
-        controlSize: 11,
-      });
-      renderWindowWith.setContainer(rootContainer);
-      // fullScreenRenderer.setBackground([0,0,0]);
 
-      // const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
-      const renderer = renderWindowWith.getRenderer();
-      const renderWindow = renderWindowWith.getRenderWindow();
-         
-      const resetCamera = renderer.resetCamera;
-      const render = renderWindow.render;
-      const mapper = vtkMapper.newInstance();
-      const actor = vtkActor.newInstance();
-      const reader = vtkUnstructuredDataReader.newInstance();
-      const scalarName ="Pressure";
-      var scalars;
-      reader.setUrl('data/Fire/POST0.vtk').then(() => {
-          const polydata = reader.getOutputData(0);        
-            scalars = reader.getOutputData(1);    
-          const scalarArray=scalars.get(scalarName);
-          const dataArray = vtkDataArray.newInstance({
-            name:scalarName,
-            size:polydata.getNumberOfPoints()
-          });
-          dataArray.setData(scalarArray);
-          polydata.getPointData().setScalars(dataArray); 
-          actor.setMapper(mapper);
-          mapper.setInputData(polydata);
-          renderer.addActor(actor);
-          let lut = mapper.getLookupTable();
-          const scalarBarActor = vtkScalarBarActor.newInstance();
-          renderer.addActor(scalarBarActor);
-          scalarBarActor.setScalarsToColors(lut);
-          console.log("lut:",lut.getRange());    
-          // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
-          function generateTicks(numberOfTicks) {
-            return (helper) => {
-              const lastTickBounds = helper.getLastTickBounds();
-              // compute tick marks for axes
-              const scale = d3
-                .scaleLinear()
-                .domain([0.0, 1.0])
-                .range([lastTickBounds[0], lastTickBounds[1]]);
-              const samples = scale.ticks(numberOfTicks);
-              const ticks = samples.map((tick) => scale(tick));
-              // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
-              formatDefaultLocale({ minus: '\u002D' });
-              const format = scale.tickFormat(
-                ticks[0],
-                ticks[ticks.length - 1],
-                numberOfTicks
-              );
-              const tickStrings = ticks
-                .map(format)
-                .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
-              helper.setTicks(ticks);
-              helper.setTickStrings(tickStrings);
-            };     
-          }
-          scalarBarActor.setGenerateTicks(generateTicks(5));
-          scalarBarActor.setAxisLabel(scalarName);
-          scalarBarActor.setDrawAboveRangeSwatch(true);
-          
-          const ctf = vtkColorTransferFunction.newInstance();
-          ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
-          ctf.addRGBPoint(1.0, 1.0, 0.0, 0.0);
+const min=ref(0.0);
+const max=ref(1.0);
+const scalarAll = ref([]);
+/*
+Temperature：温度
+Pressure：压强
+SO2：SO2
+CO2：CO2
+Height：水位高度
+*/
+const scalarName = ref("CO2");
+const filedir =ref("data/Fire/");
+// const scalarName = ref("Height");
+// const filedir =ref("data/Water/");
+const renderWindowWith = vtkRenderWindowWithControlBar.newInstance({
+    controlSize: 11,
+  });
 
-          mapper.setLookupTable(ctf);
-          lut = mapper.getLookupTable();
-          scalarBarActor.setScalarsToColors(lut);
-          resetCamera();
-          render();
+const renderer = renderWindowWith.getRenderer();
+// renderer.setBackground([0.1,0.2,0]); 
+const renderWindow = renderWindowWith.getRenderWindow();
+const resetCamera = renderer.resetCamera;
+const render = renderWindow.render;
+const mapper = vtkMapper.newInstance();
+//Sets scalarMode to USE_POINT_DATA
+// mapper.setScalarModeToUsePointData();
+const actor = vtkActor.newInstance();
+const reader = vtkUnstructuredDataReader.newInstance();
 
-        for (let index = 1; index <= 60; index++) {
-          var flag =true;
-          while(flag){
-              flag=false;
-              const reader = vtkUnstructuredDataReader.newInstance();
-              reader.setUrl('data/Fire/POST'+index+'.vtk').then(() => {
-                console.log("index:",index);
-                const polydata = mapper.getInputData();    
-                // console.log("polydata:",polydata);
-                const scalars = reader.getOutputData(1);
-                // console.log("scalars:",scalars);        
-                const scalarArray=scalars.get(scalarName);
-                  // console.log("polydata.getNumberOfPoints():",polydata.getNumberOfPoints());        
-                const dataArray = vtkDataArray.newInstance({
-                  name:scalarName,
-                  size:polydata.getNumberOfPoints()
-                });
-                dataArray.setData(scalarArray);
-                polydata.getPointData().setScalars(dataArray); 
-                mapper.setInputData(polydata);
-                renderWindow.render();
-                flag=true;
-              });
-          }  
-        }
-
-      });
-      renderWindow.render();
+// 用来修改状态、触发更新的函数
+function inOpacity() {
+  opacity.value=opacity.value+0.1;
+  actor.getProperty().setOpacity(opacity.value);
+  renderWindow.render();
+}
+function getMinMax(scalars){
+  // console.log("getMinMax:",scalars);
+       min.value=scalars[0];
+       max.value=scalars[0];
+  for (let index = 0; index <= scalars.length; index++) {
+    let scalar=scalars[index];
+     if(min.value>scalar){
+        min.value=scalar;
+      }
+      if(max.value<scalar){
+        max.value=scalar;
+      }
+  }
+  console.log("max，min:",max.value,min.value);
+}
+// 用来修改状态、触发更新的函数
+function increment() {
+  count.value++;
+  const scalars=scalarAll.value[count.value];
+  const polydata = mapper.getInputData();      
+  const scalarArray=scalars.get(scalarName.value);
+  // console.log("scalarArray:",scalarArray);
+  const dataArray = vtkDataArray.newInstance({
+    name:scalarName.value,
+    size:polydata.getNumberOfPoints()
+  }); 
+  dataArray.setData(scalarArray);
+  // console.log("dataArray1:",JSON.stringify(dataArray)==JSON.stringify(polydata.getPointData().getScalars()));
+  // polydata.getPointData().removeAllArrays();
+  polydata.getPointData().setScalars(dataArray); 
+  // getMinMax(scalarArray);
+  // mapper.setScalarRange(min.value,max.value);//设置范围
+  // console.log("dataArray2:",JSON.stringify(dataArray)==JSON.stringify(polydata.getPointData().getScalars()));
+  // mapper.setInputData(polydata);
+  mapper.clearColorArrays();//强制重建颜色
+  // actor.setMapper(mapper);
+  // mapper.setInputData(polydata);
+  // renderer.addActor(actor);
+  actor.getProperty().setOpacity(count.value);//设置错误的透明度使得页面重新加载  不设置不刷新页面
+  renderWindow.render();
+}
+//加载所有 标量数据
+function loadScalarAll(){
+ for (let index = 0; index <= 60; index++) {
+    const reader = vtkUnstructuredDataReader.newInstance();
+    reader.setUrl(filedir.value+'POST'+index+'.vtk').then(() => {
+    const scalars = reader.getOutputData(1);
+    scalarAll.value[index]=scalars;
     });
-    return ;
   }
+  //  console.log("scalarAll.value:",scalarAll.value);
+}
+//设置 
+function generateTicks(numberOfTicks) {
+  return (helper) => {
+    const lastTickBounds = helper.getLastTickBounds();
+    // compute tick marks for axes
+    const scale = d3
+      .scaleLinear()
+      .domain([0.0, 1.0])
+      .range([lastTickBounds[0], lastTickBounds[1]]);
+    const samples = scale.ticks(numberOfTicks);
+    const ticks = samples.map((tick) => scale(tick));
+    // Replace minus "\u2212" with hyphen-minus "\u002D" so that parseFloat() works
+    formatDefaultLocale({ minus: '\u002D' });
+    const format = scale.tickFormat(
+      ticks[0],
+      ticks[ticks.length - 1],
+      numberOfTicks
+    );
+    const tickStrings = ticks
+      .map(format)
+      .map((tick) => Number(parseFloat(tick).toPrecision(12)).toPrecision()); // d3 sometimes adds unwanted whitespace
+    helper.setTicks(ticks);
+    helper.setTickStrings(tickStrings);
+  };     
+}
+//安装时
+onMounted(() => {
+  //div 绑定
+  const rootContainer =document.getElementById("vtkContainer");
+  rootContainer.style.position = 'relative';
+  rootContainer.style.width = '1000px';
+  rootContainer.style.height = '500px';
+  console.log("rootContainer:",rootContainer);    
+ 
+  renderWindowWith.setContainer(rootContainer);
+  // fullScreenRenderer.setBackground([0,0,0]);
 
+  // const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
+ 
+  reader.setUrl(filedir.value+'POST1.vtk').then(() => {
+    const polydata = reader.getOutputData(0);        
+    const scalars = reader.getOutputData(1);    
+    const scalarArray=scalars.get(scalarName.value);
+    console.log("scalarArray:",scalarArray);
+    const dataArray = vtkDataArray.newInstance({
+      name:scalarName.value,
+      size:polydata.getNumberOfPoints()
+    });
+    dataArray.setData(scalarArray);
+    polydata.getPointData().setScalars(dataArray); 
+    actor.setMapper(mapper);
+    mapper.setInputData(polydata);
+    getMinMax(scalarArray);
+    mapper.setScalarRange(min.value,max.value);//设置范围
 
-  
-}
+    renderer.addActor(actor);
+
+    let lut = mapper.getLookupTable();
+    const scalarBarActor = vtkScalarBarActor.newInstance();
+    renderer.addActor(scalarBarActor);
+    scalarBarActor.setScalarsToColors(lut);
+    console.log("lut:",lut.getRange());    
+    // Change the number of ticks (TODO: add numberOfTicks to ScalarBarActor)
+    scalarBarActor.setGenerateTicks(generateTicks(5));
+    scalarBarActor.setAxisLabel(scalarName.value);
+    scalarBarActor.setDrawAboveRangeSwatch(true);
+    
+    //修改设条颜色
+    const ctf = vtkColorTransferFunction.newInstance();
+    ctf.addRGBPoint(0.0, 0.0, 0.0, 1.0);
+    ctf.addRGBPoint(1.0, 0.0, 1.0, 0.0);
+    ctf.addRGBPoint(2.0, 1.0, 0.0, 0.0);
+    mapper.setLookupTable(ctf);
 
+
+    lut = mapper.getLookupTable();
+    scalarBarActor.setScalarsToColors(lut);
+
+    resetCamera();
+    render();
+  });
+  // renderWindow.render();
+  loadScalarAll();
+});
 </script>
 
 <style scoped>
-.controls {
-  position: absolute;
-  top: 25px;
-  left: 25px;
-  background: white;
-  padding: 12px;
-}
 </style>