How ResliceCursorWidget zoom of sliced images

1、In ResliceCursorWidget, the mouse wheel is used to set the slice position. What should I do if I want to zoom the slice?

2、In ResliceCursorWidget, how to get the position of the slice, because it involves the rotation angle of the slice

  1. For the first question I think you need to fix the Field Of View

  2. I’m not sure about your second quwstion, can you explain more?

1、Regarding the first question, I don’t quite understand what is fixed the Field of View. What should I do if I want to zoom in and out? For example, in ResliceCursorWidget, the right mouse button is not occupied, how to set the right mouse button to control the zoom operation.
2、Regarding the second question, I want to implement the effect in the official example of InteractorStyleMPRSlice vtk.js in ResliceCursorWidget, which can display the slice position and manually set the slice position.

You can usebslicer for testing .
Check this out:
https://apidocs.slicer.org/master/classvtkMRMLSliceNode.html#ad86a6d6a0ab7a07614511e2cd5361eb7
https://apidocs.slicer.org/master/classvtkMRMLSliceNode.html#a4656fab9aa59881cfcdf1489c6e48a32

Is this the documentation for vtk.js? Can you describe the detailed solution

Mmm… i don’t believe you wouldnneednto learn any other vtk if you can do your example on slicer but I may be wrong

Sorry, I’m a web developer, is there any vtk.js related example that I can learn from?

You shouldnsesrch on the web

Are there any other community colleagues who can help? I’ve searched the web for an answer, but haven’t found a relevant solution. Now I’m looking at the vtk.js source code, but because of the lack of documentation, I’m having a hard time solving these two problems.

The zoom problem has been solved, shift+ctrl+left mouse button can control the zoom operation of slices

1 Like

Documentation indeed needs to be improved. It is inefficient for everyone to learn vtk.js from the source code.

Feel free to contribute (PR) to the documentation. Improvements are welcomed :slight_smile:

Hello, the second question of getting the index of any slice has not been solved, do you have any good suggestions?

Regarding the index of the slice, you can get the origin and normal of the slice plane from the widget state: widget.getWidgetState().getPlanes()[ViewTypes.XY_PLANE].normal / origin

You would then need to convert it into the volume local coordinate system. (relying on the volume origin and spacing).

Hello, I read the source code of vtkInteractorStyleMPRSlice(vtk-js/index.js at ee863d1d08dc846c904526385e3d24335db16cb9 · Kitware/vtk-js · GitHub). There is a getSlice method in this Interactor to get the slice. I added this method to vtkResliceCursorWidget, but the calculation is still a bit problematic. I don’t know much about the calculation of the vtk mathematical method. How to calculate the index through the origin/normal of the plan returned by the updateReslicePlane method in the vtkResliceCursorWidget? Thanks for any advice you can give me, maybe this goes beyond solving the problem. Or is there any documentation related to vtk math methods?

In case you are axis aligned (no oblique), it should be the following:

const i = widget.getWidgetState().getPlanes()[ViewTypes.YZ_PLANE].origin[0] / image.getSpacing()[0]  - image.getOrigin()[0];
const j = widget.getWidgetState().getPlanes()[ViewTypes.XZ_PLANE].origin[1] / image.getSpacing()[1]  - image.getOrigin()[1];
const k = widget.getWidgetState().getPlanes()[ViewTypes.XY_PLANE].origin[2] / image.getSpacing()[2]  - image.getOrigin()[2];

Hey @zhangzhi93, have you figured out how to determine the position of the slice as Julien mentioned in the last comment? Because I couldn’t find any origin property in widget.getWidgetState().getPlanes()[ViewTypes.YZ_PLANE].origin[0]