Search code examples
javascriptopenseadragon

How to change first view position


I use OpenSeadragon 1.2.1.

I want to show wide image(4096 x 2160), and change first view position.


x: 640px;  
y: 320px;  
width: 1024px;  
height:768px;  
crip(320px, 1664px, 1088px, 640px); 

HTML code

<div id="mycanvas" style="width:1024px;height:768px;"></div>  
<script src="./openseadragon.min.js"></script> 
<script>


    var viewer = OpenSeadragon(
    {
        id: "mycanvas",
        prefixUrl: "./images/",
        tileSources: "./dzc_output_images/datas.xml"
    });

    viewer.addHandler('open', function()
    {
    // I want to change first view position.
    // viewer.???

    // viewer.viewport.applyConstraints();
    }


</script>  

Use "Class:Rect / Class:DisplayRect" or other Classes ?

https://openseadragon.github.io/docs/OpenSeadragon.Rect.html

https://openseadragon.github.io/docs/OpenSeadragon.DisplayRect.html

How to use these Classes ?


Solution

  • Your best bet is to figure out the location you want to feature, as a rectangle in viewport coordinates (where 0 is the left side of the image and 1 is the right side). For instance (inside the "open" handler you've written):

    var box = new OpenSeadragon.Rect(0.25, 0.25, 0.5, 0.5);
    viewer.viewport.fitBounds(box, true);