如何在调整可调整大小的div时调整ScaleX和ScaleY值?

时间:2016-03-16 13:29:23

标签: html css jquery-ui resize scale

我将宽度设置为100px,高度设置为100px。我需要在调整可调整大小的div时获取ScaleX和ScaleY值。?我用Jquery-ui来调整大小。请先检查镀铬。请帮我。在此先感谢。

$("#resize_div").resizable({
            resize: function(){
                node = $("#resize_div")[0];
                var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);       
                $("#scalex").text("Scale X: " + curTransform.a);
                $("#scaley").text("Scale Y: " + curTransform.d);
           }
});

我的代码在Jsfiddle。!

2 个答案:

答案 0 :(得分:1)

你能试试吗?

$("#resize_div").resizable({
            resize: function(){
              var width = $(this).width();
            var height = $(this).height();
            var scalax = width/height;
            var scalay = height/width;
                    node = $("#resize_div")[0];
                    var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
                $("#scalex").text("Scale X: " + scalax);
                $("#scaley").text("Scale Y: " + scalay);
           }
      });

答案 1 :(得分:0)

我注意到,Scale-X值可以通过除以当前宽度(调整大小)除以初始宽度(在这种情况下初始宽度为100px)得到。 试试这个..

 $("#resize_div").resizable({
            resize: function(){                 
                    var width = $(this).width();
                    var height = $(this).height();
                    var scalax = width/100;
                    var scalay = height/100;
            $("#scalex").text("Scale X: " + scalax);
            $("#scaley").text("Scale Y: " + scalay);
}
      });