feat(image processing): add 90-degree clockwise and counter-clockwise rotation functions

src/pages/view/components/FunctionArea.tsx

@@ -40,13 +40,13 @@ const FunctionArea = () => {
       </Col>
       <Col>
         <Button
-          onClick={() => handleButtonClick('Rotate Counterclockwise 90°')}
+          onClick={() => handleButtonClick('Rotate Counterclockwise 90')}
         >
           Rotate Counterclockwise 90°
         </Button>
       </Col>
       <Col>
-        <Button onClick={() => handleButtonClick('Rotate Clockwise 90°')}>
+        <Button onClick={() => handleButtonClick('Rotate Clockwise 90')}>
           Rotate Clockwise 90°
         </Button>
       </Col>

src/pages/view/components/viewers/stack.image.viewer.tsx

@@ -160,6 +160,131 @@ function ApplyColormap(): void {
   console.log('Applying Colormap');
 }
 
+function RotateCounterclockwise90(): void {
+  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
+    .viewport as cornerstone.StackViewport;
+  // let { rotation } = viewport.getViewPresentation();
+  // const currentRotataion = viewport.getRotation();
+  // viewport.rotation(22)
+  // console.log(`rotation:${rotation}`)
+  // if(!!rotation){
+  //   rotation=0;
+  // }
+  // viewport.setViewPresentation({ rotation: rotation ?? 0 + 30 });
+  // // // Implement the logic to rotate the image counterclockwise
+  // // viewport.setCamera({ rotation: -90 });
+  // viewport.render();
+
+  // // 1. 获取当前的视图表现状态（一个完整的对象）
+  // const currentViewPresentation = viewport.getViewPresentation();
+
+  // // 2. 创建一个新的对象，基于当前状态，只更新你需要修改的属性
+  // // 使用展开运算符 (...) 来复制所有现有属性
+  // const newViewPresentation = {
+  //   ...currentViewPresentation, // 保留所有原有属性，如 scale, translation, flip 等
+  //   rotation: currentViewPresentation.rotation ?? + 30, // 只覆盖 rotation 属性
+  // };
+
+  // // 3. 将完整的新状态对象设置回 viewport
+  // viewport.setViewPresentation(newViewPresentation);
+  // viewport.render();
+
+  //----------------------------------------
+  // // 获取当前的完整视图状态
+  // const currentViewState = viewport.getViewPresentation();
+
+  // // 创建新的视图状态对象，保持所有其他属性不变
+  // const newViewState = {
+  //   ...currentViewState, // 保留所有现有属性
+  //   rotation: (currentViewState.rotation ?? 0 + 30) % 360 // 只修改rotation
+  // };
+
+  // // 设置新的视图状态
+  // viewport.setViewPresentation(newViewState);
+  // viewport.render();
+  //-----------------------------------------
+  // 获取当前相机
+  const camera = viewport.getCamera();
+
+  // // 计算新的旋转角度（当前角度 + 90度）
+  // const newRotation = (camera.rotation ?? 0) + 90;
+
+  // // 转换为弧度
+  // const radians = newRotation * Math.PI / 180;
+
+  // // 计算新的viewUp向量（顺时针旋转90度）
+  // const newViewUp:[number, number, number] = [
+  //   Math.cos(radians),  // X分量
+  //   Math.sin(radians),  // Y分量
+  //   0                   // Z分量
+  // ];
+
+  // // 设置新的相机参数
+  // viewport.setCamera({
+  //   ...camera,          // 保持其他相机参数不变
+  //   viewUp: newViewUp,  // 更新向上向量
+  //   rotation: newRotation // 更新旋转角度（可选，但推荐）
+  // });
+
+  // 计算新的旋转角度（当前角度 + 90度）
+  const newRotation = (camera.rotation ?? 0) + 90;
+
+  // 但计算viewUp向量时，我们应该使用90度的弧度，而不是新角度的弧度！
+  const ninetyDegreesRadians = 90 * Math.PI / 180;
+
+  // 获取当前的viewUp向量
+  const currentViewUp = camera.viewUp || [0, 1, 0];
+
+  // 计算旋转后的viewUp向量（这才是正确的相对旋转）
+  const newViewUp: [number, number, number] = [
+    currentViewUp[0] * Math.cos(ninetyDegreesRadians) - currentViewUp[1] * Math.sin(ninetyDegreesRadians),
+    currentViewUp[0] * Math.sin(ninetyDegreesRadians) + currentViewUp[1] * Math.cos(ninetyDegreesRadians),
+    0
+  ];
+
+  // 设置新的相机参数
+  viewport.setCamera({
+    ...camera,
+    viewUp: newViewUp,
+    rotation: newRotation % 360 // 确保角度在0-359范围内
+  });
+
+  viewport.render();
+
+  console.log('Rotating Image Counterclockwise 90°');
+}
+
+function RotateClockwise90(): void {
+  const viewport = cornerstone.getEnabledElementByViewportId(currentViewportId)
+    .viewport as cornerstone.StackViewport;
+  const camera = viewport.getCamera();
+  // 计算新的旋转角度（当前角度 + 90度）
+  const newRotation = (camera.rotation ?? 0) - 90;
+
+  // 但计算viewUp向量时，我们应该使用90度的弧度，而不是新角度的弧度！
+  const ninetyDegreesRadians = 90 * Math.PI / 180;
+
+  // 获取当前的viewUp向量
+  const currentViewUp = camera.viewUp || [0, 1, 0];
+
+  // 计算旋转后的viewUp向量（这才是正确的相对旋转）
+  const newViewUp: [number, number, number] = [
+    currentViewUp[0] * Math.cos(ninetyDegreesRadians) - currentViewUp[1] * Math.sin(ninetyDegreesRadians),
+    currentViewUp[0] * Math.sin(ninetyDegreesRadians) + currentViewUp[1] * Math.cos(ninetyDegreesRadians),
+    0
+  ];
+
+  // 设置新的相机参数
+  viewport.setCamera({
+    ...camera,
+    viewUp: newViewUp,
+    rotation: newRotation % 360 // 确保角度在0-359范围内
+  });
+
+  viewport.render();
+  console.log('Rotating Image Clockwise 90°');
+}
+
 const StackViewer = ({
   imageIndex = 0,
   imageUrls = [],
@@ -259,13 +384,11 @@ const StackViewer = ({
           break;
         }
         case 'Rotate Counterclockwise 90': {
-          // Implement the logic to rotate the image counterclockwise
-          console.log('Rotating Image Counterclockwise 90°');
+          RotateCounterclockwise90();
           break;
         }
         case 'Rotate Clockwise 90':
-          // Implement the logic to rotate the image clockwise
-          console.log('Rotating Image Clockwise 90°');
+          RotateClockwise90();
           break;
         case 'Rotate Any Angle':
           // Implement the logic to rotate the image by any angle