绘制流线
<h3>获取流线数据</h3>
<pre><code>const sData = await window.SDK.getSdk().RF_GenerateStreamLineData(data, {
resolution: 39
});</code></pre>
<ul>
<li>window.SDK.getSdk().RF_GenerateStreamLineData(data, { resolution: 39 })：调用SDK的RF_GenerateStreamLineData函数生成流线数据。resolution: 39设置了数据的分辨率。</li>
</ul>
<h3>初始化渲染器</h3>
<pre><code>const renderer = vtkRenderer.newInstance();
renderer.setBackground(0, 0, 0, 0);</code></pre>
<ul>
<li>vtkRenderer.newInstance()：创建新的渲染器实例。</li>
<li>renderer.setBackground(0, 0, 0, 0)：将渲染器的背景设置为完全透明。</li>
</ul>
<h3>创建演员和映射器</h3>
<pre><code>const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);</code></pre>
<ul>
<li>vtkActor.newInstance()和vtkMapper.newInstance()：创建新的演员（actor）和映射器（mapper）实例。</li>
<li>actor.setMapper(mapper)：将映射器设置为演员的映射器。</li>
</ul>
<h3>处理流线数据</h3>
<pre><code>const Points = vtkPoints.newInstance();
const points = [];
const linesD = [];
let count = -1;
for (let i = 0; i &lt; lines.length; i++) {
const line = lines[i];
linesD[i] = [];
for (let index = 0; index &lt; line.length; index++) {
count++;
const point = line[index];
linesD[i].push(count);
points.push(point.x);
points.push(point.y);
points.push(point.z);
}
}
Points.setData(new Float32Array(points));</code></pre>
<ul>
<li>vtkPoints.newInstance()：创建新的点数据实例。</li>
<li>points数组用于存储流线数据中的所有点的坐标。</li>
<li>linesD数组记录每条流线的点索引。</li>
<li>遍历流线数据，将每个点的坐标添加到points数组，将点的索引添加到linesD中。</li>
<li>Points.setData(new Float32Array(points))：将处理后的点数据设置到vtkPoints实例中。</li>
</ul>
<h3>创建vtkPolyData和vtkCellArray</h3>
<pre><code>const polydata = vtkPolyData.newInstance();
const CellArray = vtkCellArray.newInstance();
for (let index = 0; index &lt; linesD.length; index++) {
const lineIndex = linesD[index];
CellArray.insertNextCell([...lineIndex]);
}
polydata.setPoints(Points);
polydata.setLines(CellArray);</code></pre>
<ul>
<li>vtkPolyData.newInstance()：创建新的vtkPolyData实例，用于存储几何数据。</li>
<li>vtkCellArray.newInstance()：创建新的vtkCellArray实例，用于存储线的拓扑结构。</li>
<li>遍历linesD数组，将每条流线的点索引添加到CellArray中。</li>
<li>polydata.setPoints(Points)和polydata.setLines(CellArray)：将点数据和线数据设置到vtkPolyData实例中。</li>
</ul>
<h3>配置演员的颜色和不透明度</h3>
<pre><code>const color = d3.rgb(config.color);
actor.getProperty().setColor(color.r / 255, color.g / 255, color.b / 255);
actor.getProperty().setOpacity(config.colorOpacity / 100);</code></pre>
<ul>
<li>d3.rgb(config.color)：将config.color转换为RGB颜色格式。</li>
<li>actor.getProperty().setColor(color.r / 255, color.g / 255, color.b / 255)：设置演员的颜色（RGB值应在0到1之间）。</li>
<li>actor.getProperty().setOpacity(config.colorOpacity / 100)：设置演员的不透明度。</li>
</ul>
<h3>将演员添加到渲染器</h3>
<pre><code>renderer.addActor(actor);
renderer.setLayer(5);</code></pre>
<ul>
<li>renderer.addActor(actor)：将演员添加到渲染器中以进行可视化。</li>
<li>renderer.setLayer(5)：设置渲染器的层级为5。</li>
</ul>
<h3>总结</h3>
<p>这段代码的总体流程是：</p>
<ul>
<li>生成流线数据。</li>
<li>初始化VTK渲染器。</li>
<li>创建并配置VTK演员和映射器。</li>
<li>处理流线数据，设置点数据和拓扑结构。</li>
<li>配置演员的颜色和不透明度。</li>
<li>将演员添加到渲染器中进行可视化。</li>
</ul>
<p>完整代码</p>
<pre><code class="language-javascript">/**
*
* @param {*} data
* @param {*} bounds
* @param {*} center
* @param {*} modeView
* @returns
*/
async addImageLine(data, bounds, center, modeView, options = {}) {
const sData = await window.SDK.getSdk().RF_GenerateStreamLineData(data, {
resolution: 39 // 分辨率
});
const renderer = vtkRenderer.newInstance();
const lines = sData.out_data || [];
renderer.setBackground(0, 0, 0, 0); // RGBA 中的 A 通道设置为 0 表示完全透明
const actor = vtkActor.newInstance();
const mapper = vtkMapper.newInstance();
actor.setMapper(mapper);
const Points = vtkPoints.newInstance();
const points = [];
const linesD = [];
let count = -1;
for (let i = 0; i &lt; lines.length; i++) {
const line = lines[i];
linesD[i] = [];
for (let index = 0; index &lt; line.length; index++) {
count++;
const point = line[index];
linesD[i].push(count);
points.push(point.x);
points.push(point.y);
points.push(point.z);
}
}
Points.setData(new Float32Array(points));
// 创建PolyData对象
const polydata = vtkPolyData.newInstance();
// 创建曲线的拓扑结构
const CellArray = vtkCellArray.newInstance();
for (let index = 0; index &lt; linesD.length; index++) {
const lineIndex = linesD[index];
CellArray.insertNextCell([...lineIndex]);
}
polydata.setPoints(Points);
polydata.setLines(CellArray);
mapper.setInputData(polydata);
const curBounds = actor.getBounds();
const color = d3.rgb(config.color);
actor.getProperty().setColor(color.r / 255, color.g / 255, color.b / 255);
actor.getProperty().setOpacity(config.colorOpacity / 100); // 设置不透明度
renderer.addActor(actor);
renderer.setLayer(5);
}</code></pre>