backbone: JQuery repositioning of image inside another image after zoom

lundi 20 avril 2015

JQuery repositioning of image inside another image after zoom

I have an image(main image) say, of height and width 300 and 500 respectively. Inside that image I have a pointer image for hotspot which starts at 60% of width and 40% of height. The percentage has been calculated as:

    xFact = parseFloat(((dotX * zoom))/imgW);
    yFact = parseFloat(((dotY * zoom))/imgH);
    console.log("yFact : " + yFact);
    xPercentage = parseFloat(xFact * 100);
    yPercentage = parseFloat(yFact * 100);

But when this image is zoomed the co-ordinates gets shifted and does not point to the actual location where it was positioned before zoom, Image and its point before zoom.

Image and its point after zoom out. enter image description here

Placing the entire code here:

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.0.min.js"></script>
<style>
</style>
</head>
<body>
<br />
<br />
<br />
<br />
<div style="text-align:center">
<div id="yourdiv" style="position: relative; display: inline-block;">
<img id = "mainImg" src="xc.jpg" style="position: relative; display: inline-block;"/>
</div>
<br />
<br />
<input type='button' value='ZoomIn' id='btn1' onclick="ZoomIn()">
<input type='button' value='ZoomOut' id='btn2' onclick="ZoomOut()">
<p id="demo"></p>
</div>

<script>
var imgW;
var imgH;
var offset;
var xPercentage;
var yPercentage;
var xFact;
var yFact;
var zoom = 1;
var dotX = 308;
var dotY = 245;
var hpX = 23;
var hpY = 22;

$( document ).ready(function() {
        $("#mainImg").load(function(){          
                imgW = $("#mainImg").width();
                imgH = $("#mainImg").height();  

                xFact = parseFloat(((dotX * zoom))/imgW);
                yFact = parseFloat(((dotY * zoom))/imgH);
                console.log("yFact : " + yFact);
                xPercentage = parseFloat(xFact * 100);
                yPercentage = parseFloat(yFact * 100);
                console.log("xPercentage : " + xPercentage + " yPercentage : " + yPercentage);
                
                $('#yourdiv').append( 
  '<img id="child" src="hotspoticonred.png" style="position: absolute;width: auto;height: auto;top:'+yPercentage+'%;left:'+xPercentage+'%;z-index: 100;"/>');
    });
});

$( window ).resize(function() {
        $("#mainImg").load(function(){
                imgw = $("#mainImg").width();
                imgh = $("#mainImg").height();  
                
    });
});

function Zoom(state) {
        
        if (state ==  true) {
                zoom = parseFloat(zoom + .1);
        } else {
                zoom = parseFloat(zoom - .1);
        }

        jQuery('#mainImg').css('-webkit-transform', 'scale('+ zoom +','+ zoom +')');
        jQuery('#yourdiv').css('-webkit-transform', 'scale('+ zoom +','+ zoom +')');
        var matrix = new WebKitCSSMatrix(getComputedStyle($('#mainImg')[0]).webkitTransform);
        console.log("new width : " + ($('#mainImg').width()* matrix.a) + "new height : " + $('#mainImg').height()*matrix.d);
        imgW = $('#yourdiv').width() * matrix.a;
        imgH = $('#yourdiv').height() * matrix.d;
        
        console.log("zoom : " + zoom +"imgW : " + imgW + " imgH : " + imgH);
        console.log("zoom : " + zoom +"dotX : " + imgW*xFact + " dotY : " + imgH*yFact);

        
        $('#yourdiv').append( 
  '<img id="child" src="hotspoticonred.png" style="position: absolute;width: auto;height: auto;top:'+yPercentage+'%;left:'+xPercentage+'%;z-index: 100;"/>');
}

function ZoomOut() {
        Zoom(false);
}


function ZoomIn() {
        Zoom(true);
}




</script>

</body>
</html>

Please suggest where am I going wrong.Thanks in advance.

backbone

lundi 20 avril 2015

JQuery repositioning of image inside another image after zoom

Aucun commentaire:

Enregistrer un commentaire