显示在DIV 中

package-lock.json

@@ -1520,11 +1520,6 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
-    "@popperjs/core": {
-      "version": "npm:@sxzz/popperjs-es@2.11.7",
-      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -2174,49 +2169,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.11.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
-          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2470,6 +2422,47 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.13.tgz",
       "integrity": "sha512-F/gs3kHQ8Xeo24F6EImOvBiIoYQsBjF9qoLzvk+LHxYN6ZhIDEL1NWrBFYzdFQ7NphjEYd4EvPZ+Qee+WX8P6w=="
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.11.1",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -4110,6 +4103,13 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "npm:@sxzz/popperjs-es@2.11.7",
+          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+        }
       }
     },
     "emoji-regex": {
@@ -4639,7 +4639,7 @@
     },
     "estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "esutils": {
@@ -8435,7 +8435,7 @@
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
-      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },

src/App.vue

@@ -1,14 +1,14 @@
 <template>
-  <viewindex />
+  <HelloWorld />
 </template>
 
 <script>
 import viewindex from './view/index.vue'
-
+import HelloWorld from './components/HelloWorld.vue'
 export default {
   name: 'App',
   components: {
-    viewindex
+    HelloWorld
   }
 }
 </script>

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div ref="vtkContainer" />
+    <div id="vtkContainer" />
    
   </div>
 </template>
@@ -10,7 +10,7 @@ import * as d3 from 'd3-scale';
 import { formatDefaultLocale } from 'd3-format';
 import { onMounted } from 'vue';
 import '@kitware/vtk.js/Rendering/Profiles/Geometry';
-import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
+import vtkRenderWindowWithControlBar from '@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar';
 import vtkActor           from '@kitware/vtk.js/Rendering/Core/Actor';
 import vtkMapper          from '@kitware/vtk.js/Rendering/Core/Mapper';
 import vtkUnstructuredDataReader from '../reader/UnstructuredDataReader.js';
@@ -25,22 +25,31 @@ export default {
   setup() {
     //安装时
     onMounted(() => {
-     const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
-      const renderer = fullScreenRenderer.getRenderer();
-      const renderWindow = fullScreenRenderer.getRenderWindow();
+      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);    
+            scalars = reader.getOutputData(1);    
           const scalarArray=scalars.get(scalarName);
           const dataArray = vtkDataArray.newInstance({
             name:scalarName,
@@ -79,11 +88,12 @@ export default {
                 .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);
@@ -97,7 +107,7 @@ export default {
         for (let index = 1; index <= 60; index++) {
           var flag =true;
           while(flag){
-            flag=false;
+              flag=false;
               const reader = vtkUnstructuredDataReader.newInstance();
               reader.setUrl('data/Fire/POST'+index+'.vtk').then(() => {
                 console.log("index:",index);
@@ -113,27 +123,23 @@ export default {
                 });
                 dataArray.setData(scalarArray);
                 polydata.getPointData().setScalars(dataArray); 
-                // mapper.setInputData(polydata);
+                mapper.setInputData(polydata);
                 renderWindow.render();
                 flag=true;
               });
           }  
         }
-    
-      });
-     
 
+      });
       renderWindow.render();
-
-
-      
-
-
-
     });
     return ;
   }
+
+
+  
 }
+
 </script>
 
 <style scoped>

src/components/HelloWorld——1.vue

@@ -0,0 +1,147 @@
+<template>
+
+    <div id="vtkContainer"  />
+</template>
+
+<script>
+import '@kitware/vtk.js/favicon';
+
+// Load the rendering pieces we want to use (for both WebGL and WebGPU)
+import '@kitware/vtk.js/Rendering/Profiles/Geometry';
+import { onMounted } from 'vue';
+import vtkRenderWindowWithControlBar from '@kitware/vtk.js/Rendering/Misc/RenderWindowWithControlBar';
+import vtkSlider from '@kitware/vtk.js/Interaction/UI/Slider';
+import vtkCornerAnnotation from '@kitware/vtk.js/Interaction/UI/CornerAnnotation';
+
+import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
+import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
+import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
+export default {
+  name: 'HelloWorld',
+ 
+
+  //体制
+  setup() {
+    
+    onMounted(() => {
+      // Define container size/position
+const body = document.querySelector('body');
+// const rootContainer = document.createElement('div');
+// rootContainer.style.position = 'relative';
+// rootContainer.style.width = '500px';
+// rootContainer.style.height = '500px';
+
+// body.appendChild(rootContainer);
+body.style.margin = '0';
+
+// Create render window inside container
+const rootContainer =document.getElementById("vtkContainer");
+rootContainer.style.position = 'relative';
+rootContainer.style.width = '500px';
+rootContainer.style.height = '500px';
+console.log("rootContainer:",rootContainer);    
+
+const renderWindow = vtkRenderWindowWithControlBar.newInstance({
+  controlSize: 25,
+});
+renderWindow.setContainer(rootContainer);
+
+// Add some content to the renderer
+const coneSource = vtkConeSource.newInstance();
+const mapper = vtkMapper.newInstance();
+const actor = vtkActor.newInstance();
+
+mapper.setInputConnection(coneSource.getOutputPort());
+actor.setMapper(mapper);
+
+renderWindow.getRenderer().addActor(actor);
+renderWindow.getRenderer().resetCamera();
+renderWindow.getRenderWindow().render();
+
+// Set control bar to be red so we can see it + layout setup...
+renderWindow.getControlContainer().style.background = '#eee';
+renderWindow.getControlContainer().style.display = 'flex';
+renderWindow.getControlContainer().style.alignItems = 'stretch';
+renderWindow.getControlContainer().style.justifyContent = 'stretch';
+renderWindow.getControlContainer().innerHTML = `
+  <button alt="Left"   title="Left"   value="left">L</button>
+  <button alt="Top"    title="Top"    value="top">T</button>
+  <button alt="Right"  title="Right"  value="right">R</button>
+  <button alt="Bottom" title="Bottom" value="bottom">B</button>
+  <div class="js-slider"></div>
+`;
+
+// Add corner annotation
+const cornerAnnotation = vtkCornerAnnotation.newInstance();
+cornerAnnotation.setContainer(renderWindow.getRenderWindowContainer());
+cornerAnnotation.getAnnotationContainer().style.color = 'white';
+cornerAnnotation.updateMetadata(coneSource.get('resolution', 'mtime'));
+cornerAnnotation.updateTemplates({
+  nw(meta) {
+    return `<b>Resolution: </b> ${meta.resolution}`;
+  },
+  se(meta) {
+    return `<span style="font-size: 50%"><i style="color: red;">mtime:</i>${meta.mtime}</span><br/>Annotation Corner`;
+  },
+});
+
+// Add slider to the control bar
+const sliderContainer = renderWindow
+  .getControlContainer()
+  .querySelector('.js-slider');
+sliderContainer.style.flex = '1';
+sliderContainer.style.position = 'relative';
+sliderContainer.style.minWidth = '25px';
+sliderContainer.style.minHeight = '25px';
+
+const slider = vtkSlider.newInstance();
+slider.generateValues(6, 60, 55);
+slider.setValue(6);
+slider.setContainer(sliderContainer);
+slider.onValueChange((resolution) => {
+  coneSource.set({ resolution });
+  renderWindow.getRenderWindow().render();
+  cornerAnnotation.updateMetadata(coneSource.get('resolution', 'mtime'));
+});
+
+function updateSizeAndOrientation() {
+  renderWindow.resize();
+  slider.resize();
+  renderWindow.getControlContainer().style.flexFlow = slider.getOrientation()
+    ? 'row'
+    : 'column';
+  setTimeout(slider.resize, 0);
+}
+updateSizeAndOrientation();
+
+// Handle UI to change bar location
+function onClick(e) {
+  renderWindow.setControlPosition(e.target.value);
+  updateSizeAndOrientation();
+}
+
+const list = document.querySelectorAll('button');
+let count = list.length;
+while (count--) {
+  list[count].style.width = '25px';
+  list[count].style.height = '25px';
+  list[count].style.flex = 'none';
+  list[count].addEventListener('click', onClick);
+}
+    });
+    return ;
+  }
+}
+
+
+</script>
+
+<style scoped>
+.controls {
+  position: absolute;
+  top: 25px;
+  left: 25px;
+  background: white;
+  padding: 12px;
+}
+</style>