初始化vtk 渲染器
<pre><code class="language-javascript">/**
* 初始化vtk 渲染器
* @param {*} container
*/
initVtkRenderWindow(container, type = '2D') {
const fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
background: [0, 0, 0, 0],
// antialiasing: true, // 无效
container: container // 指定容器 div
});
container.style.position = 'relative';
[].slice.call(container.querySelectorAll('canvas')).forEach(canvas =&gt; {
canvas.style.position = 'absolute';
});
// 获取窗口盒子大小
const dims = container.getBoundingClientRect();
const devicePixelRatio = window.devicePixelRatio || 1;
// const devicePixelRatio = 2;
fullScreenRenderWindow.getApiSpecificRenderWindow().setSize(
Math.floor(dims.width * devicePixelRatio),
Math.floor(dims.height * devicePixelRatio)
);
const renderWindow = fullScreenRenderWindow.getRenderWindow();
// 设置渲染窗口 图层数量
renderWindow.setNumberOfLayers(6);
const interactor = fullScreenRenderWindow.getInteractor();
// 创建一个交互样式
const interactorStyle = vtkInteractorStyleManipulator.newInstance();
setInteractorStyle(interactorStyle, type);
interactor.setInteractorStyle(interactorStyle);
container.bindRenderWindow = renderWindow;
container.bindfullScreenRenderWindow = fullScreenRenderWindow;
container.bindinteractor = interactor;
return {
renderWindow,
interactor
};
}</code></pre>
<p>这段代码定义了一个 <code>initVtkRenderWindow</code> 函数，用于初始化 <code>vtk.js</code> 的渲染窗口并设置其交互样式。下面是对代码的详细解释和总结：</p>
<h3>代码解释</h3>
<ol>
<li>
<p><strong>函数定义</strong>：</p>
<p><code>initVtkRenderWindow(container, type = '2D')</code></p>
<ul>
<li><strong><code>container</code></strong>：DOM 元素，作为渲染窗口的容器。</li>
<li><strong><code>type</code></strong>：可选参数，指定交互样式的类型，默认为 <code>'2D'</code>。</li>
</ul>
</li>
<li>
<p><strong>创建 <code>vtkFullScreenRenderWindow</code> 实例</strong>：</p>
<p><code>const fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0, 0], container: container });</code></p>
<ul>
<li>该实例提供全屏渲染窗口的功能，背景色为透明（<code>[0, 0, 0, 0]</code>）。</li>
<li>渲染窗口被嵌入到指定的 <code>container</code> 容器中。</li>
</ul>
</li>
<li>
<p><strong>设置容器样式</strong>：</p>
<p><code>container.style.position = 'relative'; [].slice.call(container.querySelectorAll('canvas')).forEach(canvas =&gt; { canvas.style.position = 'absolute'; });</code></p>
<ul>
<li>将 <code>container</code> 的 CSS <code>position</code> 属性设置为 <code>'relative'</code>，以便于管理其内部 <code>canvas</code> 元素的位置。</li>
<li>将容器内所有的 <code>canvas</code> 元素的 CSS <code>position</code> 属性设置为 <code>'absolute'</code>，使其能够覆盖容器的整个区域。</li>
</ul>
</li>
<li>
<p><strong>获取容器的尺寸和设备像素比</strong>：</p>
<p><code>const dims = container.getBoundingClientRect(); const devicePixelRatio = window.devicePixelRatio || 1;</code></p>
<ul>
<li><code>dims</code>：获取容器的尺寸和位置。</li>
<li><code>devicePixelRatio</code>：获取设备的像素比，以便进行适当的尺寸调整（通常是 <code>1</code> 或 <code>2</code>）。</li>
</ul>
</li>
<li>
<p><strong>设置渲染窗口的尺寸</strong>：</p>
<p><code>fullScreenRenderWindow.getApiSpecificRenderWindow().setSize( Math.floor(dims.width * devicePixelRatio), Math.floor(dims.height * devicePixelRatio) );</code></p>
<ul>
<li>设置渲染窗口的尺寸为容器尺寸乘以设备像素比，以确保在高分辨率屏幕上渲染的清晰度。</li>
</ul>
</li>
<li>
<p><strong>获取 <code>renderWindow</code> 和 <code>interactor</code> 实例</strong>：</p>
<p><code>const renderWindow = fullScreenRenderWindow.getRenderWindow(); const interactor = fullScreenRenderWindow.getInteractor();</code></p>
<ul>
<li><code>renderWindow</code>：用于渲染的窗口实例。</li>
<li><code>interactor</code>：用于处理用户输入和交互的实例。</li>
</ul>
</li>
<li>
<p><strong>设置交互样式</strong>：</p>
<p><code>const interactorStyle = vtkInteractorStyleManipulator.newInstance(); setInteractorStyle(interactorStyle, type); interactor.setInteractorStyle(interactorStyle);</code></p>
<ul>
<li>创建交互样式实例 <code>interactorStyle</code>。</li>
<li>根据 <code>type</code> 设置交互样式。</li>
<li>将交互样式应用于 <code>interactor</code>。</li>
</ul>
</li>
<li>
<p><strong>将实例绑定到容器</strong>：</p>
<p><code>container.bindRenderWindow = renderWindow; container.bindfullScreenRenderWindow = fullScreenRenderWindow; container.bindinteractor = interactor;</code></p>
<ul>
<li>将 <code>renderWindow</code>、<code>fullScreenRenderWindow</code> 和 <code>interactor</code> 实例绑定到 <code>container</code> 对象的属性，以便于后续使用和管理。</li>
</ul>
</li>
<li>
<p><strong>返回渲染窗口和交互器</strong>：</p>
<p><code>return { renderWindow, interactor };</code></p>
</li>
</ol>
<h3>总结</h3>
<p>这段代码创建了一个初始化 <code>vtk.js</code> 渲染窗口的函数。函数通过以下步骤完成渲染窗口的设置：</p>
<ul>
<li>创建一个全屏渲染窗口并将其嵌入到指定的容器中。</li>
<li>设置容器的 <code>canvas</code> 元素样式以确保它们正确地覆盖整个容器区域。</li>
<li>调整渲染窗口的尺寸以匹配容器的尺寸和设备像素比。</li>
<li>创建并配置交互样式，并将其应用于交互器。</li>
<li>将 <code>renderWindow</code>、<code>fullScreenRenderWindow</code> 和 <code>interactor</code> 实例绑定到容器，以便后续的操作和管理。</li>
<li>返回 <code>renderWindow</code> 和 <code>interactor</code> 对象，以供进一步使用。</li>
</ul>