如何在调整可调整大小的 div 时获取 ScaleX 和 ScaleY 值..？答案

【问题标题】：How to get ScaleX and ScaleY value while resizing a resizable div..?如何在调整可调整大小的 div 时获取 ScaleX 和 ScaleY 值..？
【发布时间】：2016-03-16 13:29:23
【问题描述】：

我已将宽度设置为 100 像素，高度设置为 100 像素。我需要在调整可调整大小的 div 大小时获取 ScaleX 和 ScaleY 值..？我已经使用 Jquery-ui 来调整大小。请先签入chrome。请帮我。提前致谢。

$("#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.!

【问题讨论】：

标签： html css jquery-ui resize scale

【解决方案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);
           }
      });

【讨论】：

是的，您已经更改了代码.. 但是通过将宽度除以高度（反之亦然）将是 ScaleX 和 ScaleY 值..？它如何成为宽度：100px & height:100px div..的比例值？

【解决方案2】：

我注意到，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);
}
      });

【讨论】：