Merge pull request #476 from cornerstonejs/fix/viewport-translation

Fixing canvas' wrong translation for displayedArea

Author: igoroctaviano

example/displayedArea/index.html

@@ -8,7 +8,7 @@
     <div class="container">
 
         <h1>
-            displayed/index.html
+            displayedArea/index.html
         </h1>
 
         This example demonstrates the IHE Image Display Test 521: Consistent Presentation of Images.

src/internal/calculateTransform.js

@@ -27,8 +27,12 @@ export default function (enabledElement, scale) {
   let widthScale = enabledElement.viewport.scale;
   let heightScale = enabledElement.viewport.scale;
   const imageDisplayedArea = getDisplayedArea(enabledElement.image, enabledElement.viewport);
-  const width = imageDisplayedArea.brhc.x - (imageDisplayedArea.tlhc.x - 1);
-  const height = imageDisplayedArea.brhc.y - (imageDisplayedArea.tlhc.y - 1);
+
+  const offsetX = imageDisplayedArea.tlhc.x - 1;
+  const offsetY = imageDisplayedArea.tlhc.y - 1;
+
+  const width = imageDisplayedArea.brhc.x - offsetX;
+  const height = imageDisplayedArea.brhc.y - offsetY;
 
   if (imageDisplayedArea.presentationSizeMode === 'NONE') {
     if (enabledElement.image.rowPixelSpacing < enabledElement.image.columnPixelSpacing) {
@@ -89,5 +93,8 @@ export default function (enabledElement, scale) {
   // Move back from center of image
   transform.translate(-width / 2, -height / 2);
 
+  // Move to displayedArea
+  transform.translate(-offsetX, -offsetY);
+
   return transform;
 }

src/internal/drawCompositeImage.js

@@ -122,7 +122,7 @@ function renderLayers (context, layers, invalidated) {
     const width = layerDisplayedArea.brhc.x - sx;
     const height = layerDisplayedArea.brhc.y - sy;
 
-    context.drawImage(layer.canvas, sx, sy, width, height, 0, 0, width, height);
+    context.drawImage(layer.canvas, sx, sy, width, height, sx, sy, width, height);
     context.restore();
 
     layer.invalid = false;

src/rendering/renderColorImage.js

@@ -161,7 +161,7 @@ export function renderColorImage (enabledElement, invalidated) {
   const width = imageDisplayedArea.brhc.x - sx;
   const height = imageDisplayedArea.brhc.y - sy;
 
-  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+  context.drawImage(renderCanvas, sx, sy, width, height, sx, sy, width, height);
 
   enabledElement.renderingTools = saveLastRendered(enabledElement);
 }

src/rendering/renderGrayscaleImage.js

@@ -122,7 +122,7 @@ export function renderGrayscaleImage (enabledElement, invalidated) {
   const width = imageDisplayedArea.brhc.x - sx;
   const height = imageDisplayedArea.brhc.y - sy;
 
-  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+  context.drawImage(renderCanvas, sx, sy, width, height, sx, sy, width, height);
 
   enabledElement.renderingTools = saveLastRendered(enabledElement);
 }

src/rendering/renderLabelMapImage.js

@@ -125,7 +125,7 @@ export function renderLabelMapImage (enabledElement, invalidated) {
   const width = imageDisplayedArea.brhc.x - sx;
   const height = imageDisplayedArea.brhc.y - sy;
 
-  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+  context.drawImage(renderCanvas, sx, sy, width, height, sx, sy, width, height);
 
   enabledElement.renderingTools = saveLastRendered(enabledElement);
 }

src/rendering/renderPseudoColorImage.js

@@ -129,7 +129,7 @@ export function renderPseudoColorImage (enabledElement, invalidated) {
   const width = imageDisplayedArea.brhc.x - sx;
   const height = imageDisplayedArea.brhc.y - sy;
 
-  context.drawImage(renderCanvas, sx, sy, width, height, 0, 0, width, height);
+  context.drawImage(renderCanvas, sx, sy, width, height, sx, sy, width, height);
 
   enabledElement.renderingTools = saveLastRendered(enabledElement);
 }

src/rendering/renderWebImage.js

@@ -50,7 +50,7 @@ export function renderWebImage (enabledElement, invalidated) {
     const width = imageDisplayedArea.brhc.x - sx;
     const height = imageDisplayedArea.brhc.y - sy;
 
-    context.drawImage(image.getImage(), sx, sy, width, height, 0, 0, width, height);
+    context.drawImage(image.getImage(), sx, sy, width, height, sx, sy, width, height);
   } else {
     renderColorImage(enabledElement, invalidated);
   }