Align image to the left or right side of the canvas

leonardorame commented 3 years ago

The default alignment of the image inside the canvas is center, vertical and horizontal.

How can I align the image to the left or right side of the canvas?.

leonardorame commented 3 years ago

I've been trying with this code, but the translation is wrong, the image ends in a non visible area of the canvas.

The initial vp.translation is {x:0, y:0} (the default).

let cornerstoneEl = cornerstone.getEnabledElement(element);                                                                                                       
const vp = cornerstoneEl.viewport;                                                                                                                                
const left = cornerstoneEl.canvas.offsetLeft;                                                                                                                     
const right = left + cornerstoneEl.canvas.width;                                                                                                                  
let position = cornerstone.pageToPixel(element, right, 0);                                                                                                        
vp.translation.x += position.x - cornerstoneEl.image.width;                                                                                                       
cornerstone.setViewport(element, vp);

leonardorame commented 3 years ago

I found the problem, my example works only if the main element's position is relative to the body of the document.

Here's a complete example to visualize my point:

!DOCTYPE HTML>                                                                                                                                                         
<html>                                                                                                                                                                  
<body>                                                                                                                                                                  
<div class="container">                                                                                                                                                 

  <div style="position: relative; border: 2px solid red; width: 600px;">                                                                                                
    <div id="dicomImage" style="position: relative; width:512px;height:512px; border: 2px solid blue;"                                                                  
         oncontextmenu="return false"                                                                                                                                   
         onmousedown="return false">                                                                                                                                    
    </div>                                                                                                                                                              
  </div>                                                                                                                                                                

</div>                                                                                                                                                                  
</body>                                                                                                                                                                 

<!-- include the cornerstone library -->                                                                                                                                
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>                                                  

<!-- include special code for these examples which provides images -->                                                                                                  
<script src="https://rawgit.com/cornerstonejs/cornerstone/master/example/exampleImageIdLoader.js"></script>                                                             

<script>                                                                                                                                                                
   function onImageRendered(e) {                                                                                                                                        
        let element = e.target;                                                                                                                                         
        let cornerstoneEl = cornerstone.getEnabledElement(element);                                                                                                     
        const vp = cornerstoneEl.viewport;                                                                                                                              
        const left = cornerstoneEl.canvas.offsetLeft;                                                                                                                   
        const right = left + cornerstoneEl.canvas.width;                                                                                                                
        let position = cornerstone.pageToPixel(element, right, 0);                                                                                                      
        vp.translation.x += position.x - cornerstoneEl.image.width;                                                                                                     
        cornerstone.setViewport(element, vp);                                                                                                                           
    };                                                                                                                                                                  
    const viewportOptions = {                                                                                                                                           
        scale: 0.50,                                                                                                                                                    
    };                                                                                                                                                                  
    const element = document.getElementById('dicomImage');                                                                                                              
    element.addEventListener('cornerstoneimagerendered', onImageRendered);                                                                                              
    cornerstone.enable(element);                                                                                                                                        
    cornerstone.loadImage("example://1").then(function (image) {                                                                                                        
        cornerstone.displayImage(element, image, viewportOptions);  
    });                                                                                                                                                                 
</script>                                                                                                                                                               
</html>

That results in this image:

As you can see, there's a div with a red border containing one with blue border. The inner div is the Cornerstone's element with an image perfectly aligned to the right.

leonardorame commented 3 years ago

Now, If I wrap the element inside a absolute positioned div, the image in the inner div isn't aligned to the right side of it's container, but is still positioned based on the left hand side of the document (or screen).

Here's the modified html (the javascript didn't change):

<!DOCTYPE HTML>                                                                                                                                                         
<html>                                                                                                                                                                  
<body>                                                                                                                                                                  
<div class="container">                                                                                                                                                 

  <div style="position: absolute; left: 200px; width: 600px;border: 2px solid red;">                                                                                    
      <div id="dicomImage" style="position: relative; width:512px;height:512px; border: 2px solid blue;"                                                                
           oncontextmenu="return false"                                                                                                                                 
           onmousedown="return false">                                                                                                                                  
      </div>                                                                                                                                                            
  </div>                                                                                                                                                                

</div>                                                                                                                                                                  
</body>

And here's the result:

leonardorame commented 3 years ago

I made a 3rd test with two relative positioned divs, both having float: left; and got the same result. So, my original assumption was wrong, the alignment of the container does not affect the image position.

leonardorame commented 3 years ago

Finally I found a solution:

Replace this:

const left = cornerstoneEl.canvas.offsetLeft;

With this:

const left = element.getBoundingClientRect().x + window.scrollX + cornerstoneEl.canvas.offsetLeft;

The result:

cornerstonejs / cornerstone

Align image to the left or right side of the canvas #543