Question

I am building an application using Raphaël. I have done my work on vectors, now what I want is this – that I want to zoom the vectors. I have implemented this code on it, but when I zoom out the element its coordinates also changes with it, which I don’t want.

Please help me out. Thanks in advance.

Here is my code:

    var raphael=Raphael(20,20,500,500)
    var dress=raphael.rect(50,30,200,300)
    dress.attr(
    {
        fill:"green",
        stroke:"black",
        opacity:"0.3"

    }
)
    var mdipoint=raphael.circle(150,175,2).attr(
    {
        fill:"black",
        stroke:"black"
    }
)
    dress.toFront()

dress.mousemove(function(){

        var c= dress.scale(0.5)
        //var x,y;
        xx=event.pageX
        yy=event.pageY
        document.getElementById("t1").value=xx
        document.getElementById("t2").value=yy



   //     var x,y;
     //   x=event.pageX-150
       // y=event.pageY-175
        //document.getElementById("t1").value=x
        //document.getElementById("t2").value=y
       // alert(x+","+y)



})

    dress.mousemove(function(event){

        var x,y;
        x=event.pageX-70
        y=event.pageY-50
        document.getElementById("t1").value=x
        document.getElementById("t2").value=y

    })
    dress.mouseout(function(){

        document.getElementById("t1").value=""
        document.getElementById("t2").value=""
    })

Answer 1

To return something to its original size, use .scale(1). The scale is always relative to the original size, not the previous size.

So to shrink the rectangle on mouseover and then to return it to its original size, with its original corner coordinates, use something like:

    dress.mouseover(function(){
          // Shrink rectangle
        dress.scale(0.5)
    });
    dress.mouseout(function(){
          // This will return it to original size
        dress.scale(1);
    })

simplified jsFiddle example

(You don’t need to assign scaling operations to variables)