vtkjs 事件系统二 vtkInteractorObserver & vtkInteractorStyle

最新推荐文章于 2021-02-19 17:29:46 发布

原创最新推荐文章于 2021-02-19 17:29:46 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vtkjs

本文介绍了VTK.js中如何通过InteractorObserver和InteractorStyle实现事件监听与交互模式定制，以及Manipulator如何配置不同类型的相机操作。重点讲解了预设的Manipulator类型和自定义交互样式的应用。

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方法注册进来