绘制粒子图
<p>代码的目的是将图片数据添加到 VTK 渲染器中，并显示为一个平面纹理。下面是详细解释：</p>
<h3>1. 创建渲染器</h3>
<pre><code>const renderer = vtkRenderer.newInstance();</code></pre>
<ul>
<li>vtkRenderer.newInstance()：创建一个新的 VTK 渲染器实例。渲染器负责将场景中的对象绘制到显示窗口中。</li>
</ul>
<h3>2. 设置背景色为透明</h3>
<pre><code>renderer.setBackground(0, 0, 0, 0); // RGBA 中的 A 通道设置为 0 表示完全透明</code></pre>
<p>renderer.setBackground(0, 0, 0, 0)：设置渲染器的背景色为透明。0, 0, 0 表示黑色，而 0 表示完全透明的 Alpha 通道。</p>
<h3>3. 创建 VTK 纹理</h3>
<pre><code>const vtkTexture = window.vtk.Rendering.Core.vtkTexture.newInstance();</code></pre>
<p>window.vtk.Rendering.Core.vtkTexture.newInstance()：创建一个新的 VTK 纹理实例。纹理将用于在平面上显示图片数据。</p>
<h3>4. 创建平面源</h3>
<pre><code>const planeSource = window.vtk.Filters.Sources.vtkPlaneSource.newInstance();
planeSource.setCenter(0, 0, 0); // 平面的中心点
planeSource.setNormal(0, 0, 1); // 平面的法线方向</code></pre>
<ul>
<li>window.vtk.Filters.Sources.vtkPlaneSource.newInstance()：创建一个新的 VTK 平面源实例。平面源生成一个平面几何体，纹理将被映射到这个平面上。</li>
<li>planeSource.setCenter(0, 0, 0)：设置平面的中心点为 (0, 0, 0)。</li>
<li>planeSource.setNormal(0, 0, 1)：设置平面的法线方向为 (0, 0, 1)，即平面垂直于 Z 轴。</li>
</ul>
<h3>5. 配置纹理</h3>
<pre><code>vtkTexture.setInterpolate(true);
vtkTexture.setJsImageData(ImgData);</code></pre>
<ul>
<li>vtkTexture.setInterpolate(true)：启用纹理插值。当插值设置为 true 时，纹理在放大或缩小时会保持平滑。</li>
<li>vtkTexture.setJsImageData(ImgData)：将 Canvas 上的 ImgData 设置为纹理的图像数据。ImgData 是从 Canvas 上提取的图像数据。</li>
</ul>
<h3>6. 创建映射器</h3>
<pre><code>const mapper = window.vtk.Rendering.Core.vtkMapper.newInstance();
mapper.setInputConnection(planeSource.getOutputPort());</code></pre>
<ul>
<li>window.vtk.Rendering.Core.vtkMapper.newInstance()：创建一个新的 VTK 映射器实例。映射器将几何体（平面源）与纹理关联起来。</li>
<li>mapper.setInputConnection(planeSource.getOutputPort())：将平面源的输出连接到映射器。映射器将负责将平面源的几何数据映射到纹理上。</li>
</ul>
<h3>7. 创建演员并添加到渲染器</h3>
<pre><code>const actor = window.vtk.Rendering.Core.vtkActor.newInstance();
actor.setMapper(mapper);
actor.addTexture(vtkTexture);
renderer.addActor(actor);
renderer.setLayer(1);</code></pre>
<ul>
<li>window.vtk.Rendering.Core.vtkActor.newInstance()：创建一个新的 VTK 演员实例。演员将平面源和纹理组合成一个可渲染的对象。</li>
<li>actor.setMapper(mapper)：将映射器设置到演员上，以便演员可以将纹理应用到平面上。</li>
<li>actor.addTexture(vtkTexture)：将纹理添加到演员上。</li>
<li>renderer.addActor(actor)：将演员添加到渲染器中，使其能够被渲染。</li>
<li>renderer.setLayer(1)：设置渲染器的层级为 1。这决定了渲染器在场景中的绘制顺序，较大的层级值将覆盖较小的层级值。</li>
</ul>
<h3>总结</h3>
<p>这段代码的作用是将图片数据作为纹理应用到 VTK 渲染器中的一个平面上。具体步骤包括创建渲染器、配置背景色、创建纹理和几何体（平面）、设置纹理属性、创建映射器，将其与纹理关联、创建演员，并将演员添加到渲染器中。</p>
<p>完整代码</p>
<pre><code class="language-javascript">/**
* 添加图片数据
* @param {*} ImgData
* @param {*} renderer
*/
addImg(ImgData, bounds, options = {}) {
const renderer = vtkRenderer.newInstance();
// 将渲染器的背景色设置为透明
renderer.setBackground(0, 0, 0, 0); // RGBA 中的 A 通道设置为 0 表示完全透明
// renderWindow.addRenderer(renderer);
// vtk 纹理
const vtkTexture = window.vtk.Rendering.Core.vtkTexture.newInstance();
// 创建平面源
const planeSource = window.vtk.Filters.Sources.vtkPlaneSource.newInstance();
planeSource.setCenter(0, 0, 0); // 平面的中心点
planeSource.setNormal(0, 0, 1); // 平面的法线方向
// 方法用于设置纹理插值。当插值设置为 true 时，它会对纹理进行插值，以确保在图像放大或缩小时保持图像的平滑性。
vtkTexture.setInterpolate(true);
// 直接加载canvas的imgdata数据
vtkTexture.setJsImageData(ImgData);
// 创建映射器
const mapper = window.vtk.Rendering.Core.vtkMapper.newInstance();
mapper.setInputConnection(planeSource.getOutputPort());
// 创建一个actor
const actor = window.vtk.Rendering.Core.vtkActor.newInstance();
actor.setMapper(mapper);
actor.addTexture(vtkTexture);
renderer.addActor(actor);
renderer.setLayer(1);
}
</code></pre>