fix(AnnotatedCubeActor): Support face rotations

Author: floryst

Sources/Interaction/Widgets/OrientationMarkerWidget/example/index.js

@@ -40,6 +40,7 @@ axes.setDefaultStyle({
   fontColor: 'black',
   fontSizeScale: (res) => res / 2,
   faceColor: '#0000ff',
+  faceRotation: 0,
   edgeThickness: 0.1,
   edgeColor: 'black',
   resolution: 400,
@@ -48,6 +49,7 @@ axes.setDefaultStyle({
 axes.setXMinusFaceProperty({
   text: '-X',
   faceColor: '#ffff00',
+  faceRotation: 90,
   fontStyle: 'italic',
 });
 axes.setYPlusFaceProperty({
@@ -60,8 +62,11 @@ axes.setYMinusFaceProperty({
   faceColor: '#00ffff',
   fontColor: 'white',
 });
-axes.setZPlusFaceProperty({ text: '+Z', edgeColor: 'yellow' });
-axes.setZMinusFaceProperty({ text: '-Z', edgeThickness: 0 });
+axes.setZPlusFaceProperty({
+  text: '+Z',
+  edgeColor: 'yellow',
+});
+axes.setZMinusFaceProperty({ text: '-Z', faceRotation: 45, edgeThickness: 0 });
 
 // create orientation widget
 const orientationWidget = vtkOrientationMarkerWidget.newInstance({

Sources/Rendering/Core/AnnotatedCubeActor/index.js

@@ -69,13 +69,20 @@ function vtkAnnotatedCubeActor(publicAPI, model) {
       ctxt.strokeRect(0, 0, canvas.width, canvas.height);
     }
 
+    // set face rotation
+    ctxt.save();
+    ctxt.translate(canvas.width / 2, canvas.height / 2);
+    ctxt.rotate(-Math.PI * (prop.faceRotation / 180.0));
+
     // set foreground text
     const textSize = prop.fontSizeScale(prop.resolution);
     ctxt.fillStyle = prop.fontColor;
     ctxt.textAlign = 'center';
     ctxt.textBaseline = 'middle';
     ctxt.font = `${prop.fontStyle} ${textSize}px "${prop.fontFamily}"`;
-    ctxt.fillText(prop.text, canvas.width / 2, canvas.height / 2);
+    ctxt.fillText(prop.text, 0, 0);
+
+    ctxt.restore();
 
     const vtkImage = ImageHelper.canvasToImageData(canvas);
     texture.setInputData(vtkImage, FACE_TO_INDEX[faceName]);
@@ -130,6 +137,7 @@ export const DEFAULT_VALUES = {
   defaultStyle: {
     text: '',
     faceColor: 'white',
+    faceRotation: 0,
     fontFamily: 'Arial',
     fontColor: 'black',
     fontStyle: 'normal',