创建交互样式
<pre><code class="language-javascript">/**
* 初始化交互样式
* @param {*} interactorStyle
* @returns
*/
export function setInteractorStyle(interactorStyle, type = '2D') {
const uiComponents = {
};
const selectMap = {
leftButton: { button: 1, defaultValue: 'Rotate' },
middleButton: { button: 2, defaultValue: 'Pan' },
rightButton: { button: 3, defaultValue: 'Pan' },
shiftLeftButton: { button: 1, shift: true, defaultValue: 'Roll' },
shiftMiddleButton: { button: 2, shift: true, defaultValue: 'Rotate' },
shiftRightButton: { button: 3, shift: true, defaultValue: 'Pan' },
controlLeftButton: { button: 1, control: true, defaultValue: 'Zoom' },
controlMiddleButton: { button: 2, control: true, defaultValue: 'Rotate' },
controlRightButton: { button: 3, control: true, defaultValue: 'ZoomToMouse' },
altLeftButton: { button: 1, alt: true, defaultValue: 'Zoom' },
altMiddleButton: { button: 2, alt: true, defaultValue: 'Rotate' },
altRightButton: { button: 3, alt: true, defaultValue: 'ZoomToMouse' },
scrollMiddleButton: { scrollEnabled: true, dragEnabled: false, defaultValue: 'None' },
shiftScrollMiddleButton: {
scrollEnabled: true,
dragEnabled: false,
shift: true,
defaultValue: 'None'
},
controlScrollMiddleButton: {
scrollEnabled: true,
dragEnabled: false,
control: true,
defaultValue: 'None'
},
altScrollMiddleButton: {
scrollEnabled: true,
dragEnabled: false,
alt: true,
defaultValue: 'None'
}
};
// 初始化
Object.keys(selectMap).forEach(name =&gt; {
uiComponents[name] = {
manipName: selectMap[name].defaultValue
};
});
const manipulatorFactory = {
None: null,
Pan: vtkMouseCameraTrackballPanManipulator,
Zoom: vtkMouseCameraTrackballZoomManipulator,
Roll: vtkMouseCameraTrackballRollManipulator,
Rotate: vtkMouseCameraTrackballRotateManipulator,
MultiRotate: vtkMouseCameraTrackballMultiRotateManipulator,
ZoomToMouse: vtkMouseCameraTrackballZoomToMouseManipulator
};
// eslint-disable-next-line require-jsdoc
function reassignManipulators() {
interactorStyle.removeAllMouseManipulators();
Object.keys(uiComponents).forEach(keyName =&gt; {
const klass = manipulatorFactory[uiComponents[keyName].manipName];
if (klass) {
const manipulator = klass.newInstance();
manipulator.setButton(selectMap[keyName].button);
manipulator.setShift(!!selectMap[keyName].shift);
manipulator.setControl(!!selectMap[keyName].control);
manipulator.setAlt(!!selectMap[keyName].alt);
if (selectMap[keyName].scrollEnabled !== undefined) {
manipulator.setScrollEnabled(selectMap[keyName].scrollEnabled);
}
if (selectMap[keyName].dragEnabled !== undefined) {
manipulator.setDragEnabled(selectMap[keyName].dragEnabled);
}
interactorStyle.addMouseManipulator(manipulator);
}
});
// Always add gesture
interactorStyle.addGestureManipulator(
vtkGestureCameraManipulator.newInstance()
);
}
if (type === '2D') {
// 设置鼠标左键 为平移 2D 交互设计
uiComponents['leftButton'] = {
manipName: 'Pan'
};
} else {
// 设置鼠标左键 为旋转 3D交互设计
uiComponents['leftButton'] = {
manipName: 'Rotate'
};
}
// Populate with initial manipulators
reassignManipulators();
}
</code></pre>
<p>这段代码定义了一个 <code>setInteractorStyle</code> 函数，用于初始化和设置交互样式。以下是代码的主要功能：</p>
<ol>
<li>
<p><strong>定义 UI 组件和按钮映射</strong>：</p>
<ul>
<li><code>selectMap</code> 定义了不同鼠标按钮和组合键的默认操作，如旋转、平移、缩放等。</li>
<li><code>uiComponents</code> 初始化为 <code>selectMap</code> 中定义的默认值。</li>
</ul>
</li>
<li>
<p><strong>选择操控器</strong>：</p>
<ul>
<li><code>manipulatorFactory</code> 定义了不同操作的操控器类（例如 <code>Pan</code>, <code>Zoom</code>, <code>Rotate</code>），用于处理各种交互操作。</li>
</ul>
</li>
<li>
<p><strong>重新分配操控器</strong>：</p>
<ul>
<li><code>reassignManipulators</code> 函数负责将 <code>uiComponents</code> 中的操控器分配到 <code>interactorStyle</code> 上，并设置相关的按钮和修饰键（如 Shift、Control）。</li>
</ul>
</li>
<li>
<p><strong>设置初始化交互样式</strong>：</p>
<ul>
<li>根据 <code>type</code> 参数（<code>'2D'</code> 或 <code>'3D'</code>），调整左键的默认操作。</li>
<li>调用 <code>reassignManipulators</code> 以应用这些设置。</li>
</ul>
</li>
</ol>
<p><strong>总结</strong>：此函数根据给定的 <code>type</code> 初始化交互样式，设置不同的鼠标按钮及组合键的操作，通过映射到相应的操控器类并将其添加到 <code>interactorStyle</code>。</p>