ZOOM Mismatch in overlay

[venkatav5a8]

openseadragon add overlay working in normal mode without zooming
i can pan image right left top bottom and draw rectangle ,it is adding overlay correctly.

but issue is when you zoom image/ openseadragon that time overlay not positioning correctly.
i am trying var bounds = viewer.viewport.getBounds();
to get the zoomed image location and size but still not working can anyone help me please to find out how to use that one to calculate position and size.

[iangilman]

I'm not sure I understand your scenario. Do you have a link to share or some code to show?

[venkatav5a8]

var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "/openseadragon/images/",
    tileSources: "try/aaa/dzc_output.dzi"
});
var rect = new OpenSeadragon.Rect(1, 0.75, 1, 1);
//var rect = new OpenSeadragon.Rect(0.5, 0.2, 1, viewer.viewport.contentAspectY);
var keyDown = false;
var mousedownOnKeydown = false;
var $container = $('#containment-wrapper');
var keyPress = false;
var moueseRelease = false;
var objectPositionA = Array();
var mouseDown = false;
var mouseMove = false;
var conn = 0;

viewer.addHandler('open', function(event) {
    var img = document.createElement("div");
    $(img).addClass('recttt');
    var bounds = viewer.viewport.getBounds();
    console.log(bounds);

    //viewer.addOverlay(img, rect, OpenSeadragon.OverlayPlacement.CENTER);
    //viewer.viewport.deltaPixelsFromPoints(rect);
    //OpenSeadragon.Viewport.deltaPixelsFromPoints(current);

    /*        var bounds = new OpenSeadragon.Rect(0, 0, 0.1, 0.1);

    viewer.viewport.fitBounds(bounds);*/

});




$(document).on("keydown", function(e) {

    var $focusElem = $(":focus");

    if (e.which == 32 && !($focusElem.is("input") || $focusElem.attr("contenteditable") == "true")) {
        e.preventDefault();
        keyDown = true;
        $('#drag-canvas').addClass('hide').removeClass('show drawRectangle');
        $('.openseadragon-canvas').on('mousedown', function(event) {
            event.preventDefault();
            mousedownOnKeydown = true
            //console.log('keyPress');
            if (mousedownOnKeydown) {

            }

        });

    } else {

    }

});


$(document).on("keyup", function(e) {
    var $focusElem = $(":focus");
    if (e.which == 32 && !($focusElem.is("input") || $focusElem.attr("contenteditable") == "true")) {
        e.preventDefault();
        keyDown = false;
        //console.log('display overlay');
        $('.openseadragon-canvas').off('mousemove, mousedown');
        $('#drag-canvas').removeClass('hide').addClass('show drawRectangle');
        var bounds = viewer.viewport.getBounds();

        console.log(bounds);

    } else {}
});



$(document).on('mousedown', '#drag-canvas', function(event) {


    var $selection = $('<div>').addClass('selection-box');
    var offset = $container.offset();
    var offsetX = offset.left;
    var offsetY = offset.top;
    var objectPosition = Object();

    var mouseX = parseInt(event.clientX - offsetX);
    var mouseY = parseInt(event.clientY - offsetY);
    var widthF = 0,
        heightF = 0;


    /*if ($(this).hasClass("drawRectangle")) */
    {
        $selection.css({
            'top': mouseY,
            'left': mouseX,
            'width': 0,
            'height': 0
        });
        $selection.appendTo($container);
        mouseDown = true;

        $('#drag-canvas').on('mousemove', function(event) {
            var mouseXI = parseInt(event.clientX - offsetX);
            var mouseYI = parseInt(event.clientY - offsetY);
            var move_x = mouseXI,
                move_y = mouseYI;

            var width = Math.abs(mouseXI - mouseX),
                height = Math.abs(mouseYI - mouseY);
            widthF = width;
            heightF = height;

            var new_x, new_y;

            new_x = (move_x < offsetX) ? (offsetX - width) : offsetX;
            new_y = (move_y < offsetY) ? (offsetY - height) : offsetY;

            $selection.css({
                'width': width,
                'height': height
            });
            mouseMove = true;
        })
        $('#drag-canvas').on('mouseup', function(event) {
            $('#drag-canvas').off('mousemove');
            $('#drag-canvas').off('mouseup');

            //var rect = new OpenSeadragon.Rect(0.5, 0.2, 0.1, 0.1);
            //var img = document.createElement("div");
            //$(img).addClass('recttt');


            //viewer.addOverlay(img, rect, OpenSeadragon.OverlayPlacement.CENTER);

            if (mouseMove && mouseDown) {
                var mouseXI = parseInt(event.clientX - offsetX);
                var mouseYI = parseInt(event.clientY - offsetY);

                var width = Math.abs(mouseXI - mouseX),
                    height = Math.abs(mouseYI - mouseY);

                objectPosition.width = width;
                objectPosition.height = height;
                objectPosition.top = mouseY;
                objectPosition.left = mouseX;
                var sizePoints = viewer.viewport.getBounds().getSize();
                var sizePixels = viewer.viewport.getContainerSize();
                console.log(sizePoints);
                console.log(sizePixels);
                var bounds = viewer.viewport.getBounds();
                var ws = viewer.viewport.deltaPixelsFromPoints(sizePoints);
                console.log(ws);
                console.log(bounds);
                console.log(bounds.getAspectRatio());
                var getHomeZoom = viewer.viewport.getHomeZoom();
                console.log(getHomeZoom);





                var rect1 = new OpenSeadragon.Rect(((mouseX / 800)) + bounds.x, mouseY / (800) + bounds.y, width / 800, height / 800);


                var img1 = document.createElement("div");
                $(img1).addClass('recttt');
                viewer.addOverlay(img1, rect1, OpenSeadragon.OverlayPlacement.CENTER);


                objectPositionA.push(objectPosition); {

                    $('#drag-canvas').removeClass('show drawRectangle');

                }
            }
        });
    }
});

[iangilman]

You need to convert your position and size from screen pixels to viewport points.

Give this a try:

var position = viewer.viewport.pointFromPixel(new OpenSeadragon.Point(mouseX, mouseY));
var size = viewer.viewport.deltaPointsFromPixels(new OpenSeadragon.Point(width, height));
var rect1 = new OpenSeadragon.Rect(position.x, position.y, size.x, size.y);

[venkatav5a8]

Thank you zoom is working but i got another issue Using jqueryUI and any other javascript plugin can we drag and resize the overlay for the same code which i send ,because when i try with jqueryui draggable to drag the overlay simultaneously the image is also panning. Whether there is any method to freeze the openseadragon image. like panImage
Please .

[msalsbery]

@venkatav5a8
For elements overlaying the viewer, you can prevent pointer down events from reaching the viewer when you don't want the viewer to respond to them.

Something like this:

            $('#dragable-element').on('pointerdown mousedown touchstart', function(e) {
                e.stopPropagation();
            });