Mapping between different coordinate systems

I am trying to hook up to interactor, instance of vtkRenderWindowInteractor, callbacks onMouseMove, onMouseWheel and so on.

I have noticed that the position returned in the event is in a different coordinate system than I have expected. Basically (0,0) is in the bottom-left corner and the width and height are not in pixel space.

I would like to be able to convert the position returned by the event to “standard” canvas coordinates with (0,0) being in the top-left.

Can someone point me in to the right direction? I have been going through the docs for vtkCoordinate and vtkPixelSpaceCallbackMapper but I dont seem to find what I am looking for.

Additionally I would appreciate if you can point me to some docs/tutorials where I can learn more about vtk.js different coordinate systems and how things work.


The x,y you are getting use the VTK coordinate system. You can just flip Y using the height of the VTK render window assuming you don’t have any devicePixelRatio scaling.

1 Like

Perfect! I think that must be it, the devicePixelRatio. I didn’t think about it. Thank you.