vtkRenderWindowInteractor 通过vtkInteractorObserver来监听事件分发,
所有的InteractorStyle都是vtkInteractorObserver
一个InteractorObserver需要定义各种Event的handle: handleEvent(),初始化的时候会将handleEvent通过onEvent()方法绑定到事件
vtkInteractorObserver -> setInteractor 来设置vtkRenderWindowInteractor
publicAPI.setInteractor = (i) => {
if (i === model.interactor) {
return;
}
unsubscribeFromEvents();
model.interactor = i;
if (i && model.enabled) {
subscribeToEvents();
}
publicAPI.modified();
};
//----------------------------------------------------------------------------
// Check what events we can handle and register callbacks
function subscribeToEvents() {
vtkRenderWindowInteractor.handledEvents.forEach((eventName) => {
if (publicAPI[`handle${eventName}`]) {
model.subscribedEvents.push(
model.interactor[`on${eventName}`]((callData) => {
if (model.processEvents) {
return publicAPI[`handle${eventName}`](callData);
}
return VOID;
}, model.priority)
);
}
});
}
vtkInteractorStyle从名称理解为交互样式,集中了一套app的交互处理,
一个vtkInteractorStyle继承于InteractorObserver 就是通过实现各种事件的handle做各种事件处理
下面是一个内置的InteractorStyle实现:InteractorStyleTraceballCamera,里面就是直接对各种事件直接处理
各种应用常常有一些常用通用的操作,如摄像机rotate,zoom,pan等操作,他们可能和各种事件组合起来形成每个应用特定的交互模式,
为了实现这种灵活的可配置预制交互。
vtkjs实现了InteractorStyleManipulator 和 Manipulator来解决上诉问题
顾名思义,通过Manipulator来配置一个InteractorStyle
InteractorStyleManipulator/Presets.js 中定义了如何配置InteractorStyleManipulator,以及一些预配置
const MANIPULTOR_TYPES = { //这些就是预定义的一些通用Manipulator行为
slice: Manipulators.vtkMouseCameraSliceManipulator,
multiRotate: Manipulators.vtkMouseCameraTrackballMultiRotateManipulator,
pan: Manipulators.vtkMouseCameraTrackballPanManipulator,
roll: Manipulators.vtkMouseCameraTrackballRollManipulator,
rotate: Manipulators.vtkMouseCameraTrackballRotateManipulator,
axisRotate: Manipulators.vtkMouseCameraAxisRotateManipulator,
zoom: Manipulators.vtkMouseCameraTrackballZoomManipulator,
zoomToMouse: Manipulators.vtkMouseCameraTrackballZoomToMouseManipulator,
range: Manipulators.vtkMouseRangeManipulator,
vrPan: Manipulators.vtkVRButtonPanManipulator,
gestureCamera: Manipulators.vtkGestureCameraManipulator,
movement: Manipulators.vtkKeyboardCameraManipulator,
freeLook: Manipulators.vtkMouseCameraTrackballFirstPersonManipulator,
unicam: Manipulators.vtkMouseCameraUnicamManipulator,
unicamRotate: Manipulators.vtkMouseCameraUnicamRotateManipulator,
};
const STYLES = {
'3D': [
{ type: 'rotate' }, //表示行为和操作方式,默认是鼠标左键buton:1
{ type: 'pan', options: { shift: true } }, //表示需要shift键按下,同时鼠标左键触发
{ type: 'zoom', options: { control: true } },
{ type: 'zoom', options: { alt: true } },
{ type: 'zoom', options: { dragEnabled: false, scrollEnabled: true } },
{ type: 'zoom', options: { button: 3 } },
{ type: 'roll', options: { shift: true, control: true } },
{ type: 'roll', options: { shift: true, alt: true } },
{ type: 'roll', options: { shift: true, button: 3 } },
{ type: 'vrPan' },
{ type: 'gestureCamera' },
],
'2D': [
{ type: 'pan', options: { shift: true } },
{ type: 'zoom', options: { control: true } },
{ type: 'zoom', options: { alt: true } },
{ type: 'zoom', options: { button: 3 } },
{ type: 'roll', options: { shift: true, alt: true } },
{ type: 'roll', options: { shift: true, button: 3 } },
{ type: 'roll', options: { shift: true } },
{ type: 'vrPan' },
{ type: 'gestureCamera' },
],
FirstPerson: [{ type: 'movement' }, { type: 'freeLook' }],
Unicam: [{ type: 'unicam' }],
zRotateTop: [
{ type: 'pan', options: { shift: true } },
{
type: 'axisRotate',
options: { rotationAxis: [0, 0, 1], useHalfAxis: true },
},
{ type: 'zoom', options: { control: true } },
{ type: 'zoom', options: { alt: true } },
{ type: 'zoom', options: { dragEnabled: false, scrollEnabled: true } },
{ type: 'zoom', options: { button: 3 } },
],
zRotateAll: [
{ type: 'pan', options: { shift: true } },
{
type: 'axisRotate',
options: { rotationAxis: [0, 0, 1], useHalfAxis: false },
},
{ type: 'zoom', options: { control: true } },
{ type: 'zoom', options: { alt: true } },
{ type: 'zoom', options: { dragEnabled: false, scrollEnabled: true } },
{ type: 'zoom', options: { button: 3 } },
],
};
function applyDefinitions(definitions, manipulatorStyle) {
manipulatorStyle.removeAllManipulators();
for (let idx = 0; idx < definitions.length; idx++) {
const definition = definitions[idx];
const instance = MANIPULTOR_TYPES[definition.type].newInstance(
definition.options
);
if (instance.isA('vtkCompositeVRManipulator')) {
manipulatorStyle.addVRManipulator(instance);
} else if (instance.isA('vtkCompositeGestureManipulator')) {
manipulatorStyle.addGestureManipulator(instance);
} else if (instance.isA('vtkCompositeKeyboardManipulator')) {
manipulatorStyle.addKeyboardManipulator(instance);
} else {
manipulatorStyle.addMouseManipulator(instance);
}
}
return true;
}
通过配置,将各种Manipulator ,通过 addMouseManipulator ,addKeyboardManipulator , addVRManipulator方法注册进来