Merge branch 'master' of https://github.com/jimpeo/conrnerstone-examples

jimpeo · Apr 21, 2023 · c608ae3 · c608ae3
1 parent 4faa1a4
commit c608ae3
Show file tree

Hide file tree

Showing 10 changed files with 591 additions and 307 deletions.
diff --git a/Cornerstone.html b/Cornerstone.html
@@ -1,45 +1,48 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>最简单的例子</title>
-    <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/dicomParser.js"></script>
-    <style>
-      #container {
-        width: 500px;
-        height: 500px;
-      }
-    </style>
-  </head>
 
-  <body>
-    <div id="container"></div>
-    <script>
-      cornerstoneWADOImageLoader.webWorkerManager.initialize({
-        maxWebWorkers: navigator.hardwareConcurrency || 1,
-        startWebWorkersOnDemand: true,
-        taskConfiguration: {
-          decodeTask: {
-            initializeCodecsOnStartup: false
-          }
-        },
-        webWorkerTaskPaths: [
-          "https://unpkg.com/[email protected]/dist/610.bundle.min.worker.js",
-        ]
-      });
-      cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
-      cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
-      const element = document.getElementById("container");
-      cornerstone.enable(element);
-      const imageId =
-        "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
-      cornerstone.loadImage(imageId).then(function (image) {
-        cornerstone.displayImage(element, image);
-      });
-    </script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>cornerstone 基本使用</title>
+  <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
+  <script
+    src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
+  <script src="https://unpkg.com/[email protected]/dist/dicomParser.js"></script>
+  <style>
+    #container {
+      width: 500px;
+      height: 500px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="container"></div>
+  <script>
+    cornerstoneWADOImageLoader.webWorkerManager.initialize({
+      maxWebWorkers: navigator.hardwareConcurrency || 1,
+      startWebWorkersOnDemand: true,
+      taskConfiguration: {
+        decodeTask: {
+          initializeCodecsOnStartup: false
+        }
+      },
+      webWorkerTaskPaths: [
+        "https://unpkg.com/[email protected]/dist/610.bundle.min.worker.js",
+      ]
+    });
+    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
+    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
+    const element = document.getElementById("container");
+    cornerstone.enable(element);
+    const imageId =
+      "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
+    cornerstone.loadImage(imageId).then(function (image) {
+      cornerstone.displayImage(element, image);
+    });
+  </script>
+</body>
+
+</html>
diff --git a/CornerstoneBaseToolsUse.html b/CornerstoneBaseToolsUse.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>最简单的例子</title>
+  <title>基础工具使用</title>
   <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
   <script src="https://unpkg.com/[email protected]/dist/cornerstoneTools.js"></script>
   <script
@@ -34,11 +34,17 @@
       margin-right: 5px;
       font-size: 16px;
     }
+
+    .active {
+      background-color: rgb(220, 220, 220);
+      border: 2px solid black;
+      border-radius: 2px;
+    }
   </style>
 </head>
 
 <body>
-  <div class="container">
+  <div class="container" oncontextmenu="return false">
     <div id="enabledElement"></div>
     <div id="operation"></div>
   </div>
@@ -87,6 +93,14 @@
           configuration: {}
         }
       },
+      {
+        name: "Magnify",
+        label: "放大镜",
+        props: {
+          magnifySize: 400,
+          magnificationLevel: 3
+        }
+      },
       {
         name: "Overlay",
         label: "覆盖层",
@@ -177,18 +191,24 @@
             maxScale: 20.0
           }
         }
+      },
+      {
+        name: "Length",
+        label: "长度",
+        props: {}
       }
     ];
-    let activeToolName = "";
 
     cornerstone.enable(element);
 
     const imageId =
-      "dicomweb:https://tools.cornerstonejs.org/examples/assets/dicom/bellona/chest_lung/1.dcm";
+      "wadouri:https://182.92.128.9/file-system-online/dicom/CT/chest_lung/1/2.dcm";
+
     cornerstone.loadImage(imageId).then(function (image) {
       cornerstone.displayImage(element, image);
       toolInit();
       setToolActive(tools[0].name);
+      $(`.${tools[0].name}`).addClass("active");
     });
 
     function toolInit() {
@@ -211,29 +231,74 @@
         mouseButtonMask: mouseButtonMask || 1
       };
 
-      cornerstoneTools.setToolActive(toolName, options);
+      cornerstoneTools.setToolActiveForElement(element, toolName, options);
+    }
+
+    function setToolPassive(toolName) {
+      cornerstoneTools.setToolPassiveForElement(element, toolName);
     }
 
     function generateButtons() {
       for (let i = 0; i < tools.length; i++) {
         const button = document.createElement("button");
 
+        button.classList.add(tools[i].name);
         button.dataset.name = tools[i].name;
         button.innerText = tools[i].label;
 
         $("#operation").append(button);
       }
     }
 
+    function getElementActiveTools() {
+      const elementTools = cornerstoneTools.store.state.tools;
+      const specialStatusTools = [
+        "Overlay",
+        "ScaleOverlay",
+        "OrientationMarkers"
+      ];
+      const activeTools = elementTools.filter(
+        (tool) =>
+          (tool.element === element &&
+            tool.mode === "active" &&
+            (tool.options["isMouseActive"] ||
+              tool.options["isMouseWheelActive"])) ||
+          (specialStatusTools.includes(tool.name) && tool.mode === "enabled")
+      );
+
+      return activeTools;
+    }
+
     function addEvent() {
       $("#operation")
         .children()
         .each((index, item) => {
           const toolName = item.dataset.name;
 
           $(item).click(() => {
-            activeToolName = toolName;
-            setToolActive(toolName);
+            const activeTools = getElementActiveTools();
+
+            if (activeTools.length) {
+              const currentToolIsActive = activeTools.filter((tool) => {
+                return tool.name === toolName;
+              });
+
+              if (currentToolIsActive.length) {
+                setToolPassive(toolName);
+              } else {
+                setToolActive(toolName);
+              }
+            } else {
+              setToolActive(toolName);
+            }
+
+            $("#operation").children().removeClass("active");
+
+            const newActiveTools = getElementActiveTools();
+
+            newActiveTools.forEach((tool) => {
+              $(`.${tool.name}`).addClass("active");
+            });
           });
         });
     }

diff --git a/CornerstoneImageBasicOperation.html b/CornerstoneImageBasicOperation.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>最简单的例子</title>
+  <title>影像基础操作</title>
   <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
   <script
     src="https://unpkg.com/[email protected]/dist/cornerstoneWADOImageLoader.bundle.min.js"></script>
@@ -92,7 +92,7 @@
 
     const element = $(".enabledElement")[0];
     const imageId =
-      "wadouri:http://182.92.128.9/file-system-online/dicom/CT/chest_lung/2/1.dcm";
+      "wadouri:https://182.92.128.9/file-system-online/dicom/CT/chest_lung/1/2.dcm";
 
     cornerstone.enable(element);
 
@@ -102,7 +102,7 @@
 
     $(window).resize(() => {
       cornerstone.resize(element);
-    })
+    });
 
     $(".operation")
       .children()