VTKJS中如何为各交互工具配置对应的自定义光标样式

你目前的设置只对工具按钮DOM生效，但VTKJS真正承接鼠标交互的是视口渲染容器层——这层元素被组件内部逻辑默认绑定了cursor: pointer样式，当鼠标从按钮区域移动到画布范围内时，容器自带的光标规则会直接覆盖你的自定义设置，这就是为什么按钮上光标显示正常、一进入画布就变回默认pointer样式的原因。

• 先找准正确的样式作用元素：不要只给按钮加光标设置，要找到VTKJS渲染视口的外层承接DOM（也就是创建vtkGenericRenderWindow实例时绑定的父级div，不是内部嵌套的canvas标签），所有和视口交互相关的光标设置，都要作用在这个外层DOM上。
• 把光标切换逻辑和工具激活状态直接绑定：当用户选中某类工具时，直接通过DOM操作给视口容器动态赋值对应光标：
  • 激活缩放工具时，设置光标为zoom-in；
  • 激活平移工具时，设置光标为grab，拖动操作过程中可临时切换为grabbing提升操作感知；
  • 激活旋转工具时，设置光标为默认箭头default。
• 规避组件内置样式的覆盖问题：如果直接设置容器样式被组件逻辑重置，可以通过CSS属性优先级强制提升自定义样式的权重，示例代码：
  viewportDom.style.setProperty('cursor', 'zoom-in', 'important')
  这种写法不需要额外编写全局CSS，就能确保组件默认的pointer样式不会覆盖你的自定义光标设置。
• 关闭VTKJS内置的光标自动覆盖逻辑：在初始化交互样式时，找到组件默认交互代理实例，关闭其内置的鼠标移动时自动重置光标的功能，避免组件每次触发鼠标移动事件，都自动给视口容器重新赋值默认的pointer光标。

常见踩坑提醒：不要把光标样式直接设置在视口内部的canvas标签上，VTKJS会在canvas外层包裹一层透明的事件承接层，所有鼠标事件都是从这层抛出的，样式设置在canvas上不会生效。

内容的提问来源于stack exchange，提问作者Sagar Shelke