File tree Expand file tree Collapse file tree 6 files changed +45
-8
lines changed
Documentation/content/docs
SceneGraph/RenderWindowViewNode
Widgets3D/ResliceCursorWidget/example Expand file tree Collapse file tree 6 files changed +45
-8
lines changed Original file line number Diff line number Diff line change @@ -113,7 +113,7 @@ In order to scale a representation such that it retains the same size in
113
113
display space, a widget representation should use the ` scaleInPixels ` property
114
114
and the ` getPixelWorldHeightAtCoord(coord) ` method. When ` scaleInPixels ` is set
115
115
to true, a widget representation should multiply whatever scaling they perform
116
- by the output of ` getDisplayScaleAtCoord (coord)` .
116
+ by the output of ` getPixelWorldHeightAtCoord (coord)` .
117
117
118
118
Look at the ` SphereHandleRepresentation ` as an example for how
119
119
` getPixelWorldHeightAtCoord ` is used.
Original file line number Diff line number Diff line change @@ -327,7 +327,18 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
327
327
setViewStream ( stream : vtkViewStream ) : boolean ;
328
328
329
329
/**
330
- *
330
+ * Sets the pixel width and height of the rendered image.
331
+ *
332
+ * WebGL and WebGPU render windows apply these values to
333
+ * the width and height attribute of the canvas element.
334
+ *
335
+ * To match the device resolution in browser environments,
336
+ * multiply the container size by `window.devicePixelRatio`
337
+ * `apiSpecificRenderWindow.setSize(Math.floor(containerWidth * devicePixelRatio), Math.floor(containerHeight * devicePixelRatio));
338
+ * See the VTK.js FullscreenRenderWindow class for an example.
339
+ *
340
+ * @see getComputedDevicePixelRatio()
341
+ *
331
342
* @param {Vector2 } size
332
343
*/
333
344
setSize ( size : Vector2 ) : void ;
@@ -361,6 +372,19 @@ export interface vtkOpenGLRenderWindow extends vtkOpenGLRenderWindowBase {
361
372
*
362
373
*/
363
374
getVrResolution ( ) : Vector2 ;
375
+
376
+ /**
377
+ * Scales the size of a browser CSS pixel to a rendered canvas pixel.
378
+ * `const renderedPixelWidth = cssPixelWidth * apiRenderWindow.getComputedDevicePixelRatio()`
379
+ * Use to scale rendered objects to a consistent perceived size or DOM pixel position.
380
+ *
381
+ * Rather than using window.devicePixelRatio directly, the device pixel ratio is inferred
382
+ * from the container CSS pixel size and rendered image pixel size. The user directly sets the rendered pixel size.
383
+ *
384
+ * @see setSize()
385
+ * @see getContainerSize()
386
+ */
387
+ getComputedDevicePixelRatio ( ) : number ;
364
388
}
365
389
366
390
/**
Original file line number Diff line number Diff line change @@ -135,14 +135,19 @@ function vtkRenderWindowViewNode(publicAPI, model) {
135
135
return publicAPI . displayToNormalizedDisplay ( x2 , y2 , z ) ;
136
136
} ;
137
137
138
+ publicAPI . getComputedDevicePixelRatio = ( ) =>
139
+ model . size [ 0 ] / publicAPI . getContainerSize ( ) [ 0 ] ;
140
+
141
+ publicAPI . getContainerSize = ( ) => {
142
+ macro . vtkErrorMacro ( 'not implemented' ) ;
143
+ } ;
144
+
138
145
publicAPI . getPixelData = ( x1 , y1 , x2 , y2 ) => {
139
146
macro . vtkErrorMacro ( 'not implemented' ) ;
140
- return undefined ;
141
147
} ;
142
148
143
149
publicAPI . createSelector = ( ) => {
144
150
macro . vtkErrorMacro ( 'not implemented' ) ;
145
- return undefined ;
146
151
} ;
147
152
}
148
153
Original file line number Diff line number Diff line change @@ -121,7 +121,7 @@ function vtkWidgetManager(publicAPI, model) {
121
121
const [ cwidth , cheight ] = model . _apiSpecificRenderWindow . getViewportSize (
122
122
model . _renderer
123
123
) ;
124
- const ratio = window . devicePixelRatio || 1 ;
124
+ const ratio = model . _apiSpecificRenderWindow . getComputedDevicePixelRatio ( ) ;
125
125
const bwidth = String ( cwidth / ratio ) ;
126
126
const bheight = String ( cheight / ratio ) ;
127
127
const viewBox = `0 0 ${ cwidth } ${ cheight } ` ;
@@ -224,7 +224,11 @@ function vtkWidgetManager(publicAPI, model) {
224
224
if ( _renderer && _apiSpecificRenderWindow && _camera ) {
225
225
const [ rwW , rwH ] = _apiSpecificRenderWindow . getSize ( ) ;
226
226
const [ vxmin , vymin , vxmax , vymax ] = _renderer . getViewport ( ) ;
227
- const rendererPixelDims = [ rwW * ( vxmax - vxmin ) , rwH * ( vymax - vymin ) ] ;
227
+ const pixelRatio = _apiSpecificRenderWindow . getComputedDevicePixelRatio ( ) ;
228
+ const rendererPixelDims = [
229
+ ( rwW * ( vxmax - vxmin ) ) / pixelRatio ,
230
+ ( rwH * ( vymax - vymin ) ) / pixelRatio ,
231
+ ] ;
228
232
229
233
const cameraPosition = _camera . getPosition ( ) ;
230
234
const cameraDir = _camera . getDirectionOfProjection ( ) ;
Original file line number Diff line number Diff line change @@ -34,6 +34,10 @@ test.onlyIfWebGL('Test getPixelWorldHeightAtCoord', (t) => {
34
34
35
35
const container = document . querySelector ( 'body' ) ;
36
36
const rwContainer = gc . registerDOMElement ( document . createElement ( 'div' ) ) ;
37
+ // maintain consistent container size across browsers
38
+ rwContainer . style . width = '300px' ;
39
+ rwContainer . style . height = '300px' ;
40
+
37
41
container . appendChild ( rwContainer ) ;
38
42
39
43
const grw = vtkGenericRenderWindow . newInstance ( { listenWindowResize : false } ) ;
Original file line number Diff line number Diff line change @@ -48,8 +48,8 @@ const widget = vtkResliceCursorWidget.newInstance();
48
48
const widgetState = widget . getWidgetState ( ) ;
49
49
widgetState . setKeepOrthogonality ( true ) ;
50
50
widgetState . setOpacity ( 0.6 ) ;
51
- // Use devicePixelRatio in order to have the same display handle size on all devices
52
- widgetState . setSphereRadius ( 10 * window . devicePixelRatio ) ;
51
+ // Set size in CSS pixel space because scaleInPixels defaults to true
52
+ widgetState . setSphereRadius ( 10 ) ;
53
53
widgetState . setLineThickness ( 5 ) ;
54
54
55
55
const showDebugActors = true ;
You can’t perform that action at this time.
0 commit comments