Hello there! I am using vtk.js with react.js and I need to add the ability to measure distance on each of my three 2D slices. I noticed that modern vtk.js lacks vtkDistanceWidget, but it was available, for example, in version 24.16.0 in June 2022. So the question is, are there any plans to add back the vtkDistanceWidget and if not, then can it be completely replaced by vtkLineWidget in vtk.js?
I got acquainted with the widget using this example: vtk.js
The first thing I noticed is that in my project, in the downloaded npm packages: @kitware/vtk.js and vtk.js, there is no function that provides the ability to add text to lineWidget, namely import { bindSVGRepresentation } from 'vtk.js/ Examples/Widgets/Utilities/SVGHelpers';, as can be seen from the screenshot below:
If this is how it should be, is there any other way to show text next to lines?
Also the question is how to change the handlers color to white, for example? What values does lineWidgetState.getHandle1().setColor(X) accept? I noticed that setColor() takes inside only values from 0 to 1 with 0.1 step.
Is it possible to add divisions on line in the same way as in vtkDistanceWidget?
And is it possible to somehow consider vtkLineWidget as a 2D line so that its roundness and volume are not felt on the slice?
Yes vtkLineWidget replaces vtkDistanceWidget. No plan to add it back. Both were doublons
VTK.js no longer provides SVG support. You would have to copy/paste that code (and probably use something more “React”-ish than plain SVG).
The color mixin takes a scalar value that correspond to an index in a rainbow Lookup-table.
You can use the color3 mixin instead that takes RGB.
If you want divisions, you would need to extend the vtkLineHandleRepresentation (or vtkPolyLineRepresentation) to add ticks.
To avoid a 3D feel, you might want to use vtkLineHandleRepresentation instead of vtkPolyLineRepresentation (the ResliceCursorWidget example shows you how the lines feel)
Thanks for your reply! As for SVG, the situation became clear to me.
But when I talked about color, I meant something like this:
const line = lineWidgetManager.addWidget(lineWidget, ViewTypes.SLICE)
const lineState = line.getWidgetState()
lineState.getHandle1().setColor(...)
In this case lineState.getHandle1().setColor3(...) does not exist.
Also could you please show me how to connect my lineWidget with vtkLineHandleRepresentation using the example of adding ticks and avoiding the 3D feel. I looked inside the vtkLineHandleRepresentation and didn’t see any simple function (other than setColor3()) that would help me achieve at least one of the desired effects. I can assume that adding ticks or getting rid of the 3D effect must be done in some complicated way, am I right?
Getting rid of the 3D effect is actually done in a counter-intuitive way: having the 3D “cylinder” of the line be made of only 4 sides, and making one side facing the camera, hence it would look flat.
Regarding the ticks, there is no option to enable. It could be made with the glyph representation by having 1 glyph displayed at each tick. (It would require to get accustomed ot the “glyph representation” mechanism first though…
In my case I am using vtkLineWidget on 2D images which is similar to the example https://kitware.github.io/vtk-js/examples/ResliceCursorWidget/index.html. Sometimes when drawing the first line in a window, the line is invisible. It’s quite difficult to track what exactly the problem is and, for example, interactor.render() and renderWindow.render() do not help in my case, perhaps there are some nuances when LineWidget interacts with ResliceCursorWidget that I need to know about?
there might be some “coincident topology” offset that the makes your line render slighlty behind the reslice cursor widget (RWC). You can try to place the line slightly in front of the RCW. Or disable the rendering of the RWC to check if the line really exists.
