Question

我正在使用Raphaël构建应用程序。我已经完成了对矢量的工作，现在我想要的是 - 我想要缩放矢量。我已经在它上面实现了这个代码，但是当我缩小元素时，它的坐标也会随之改变，这是我不想要的。

请帮帮我。提前谢谢。

这是我的代码：

    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

要将某些内容恢复为原始大小，请使用.scale(1)。比例始终相对于原始大小，而不是之前的大小。

因此，要在鼠标悬停时缩小矩形，然后将其恢复为原始大小，并使用其原始角坐标，请使用以下内容：

    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

（您不需要为变量分配缩放操作）

使用Raphaël进行缩放时出现问题

1 个答案: