node = $("#yourid")[0];
var curTransform = new WebKitCSSMatrix(window.getComputedStyle(node).webkitTransform);
alert(curTransform.a); // curTransform is an object,
alert(curTransform.d); // a through f represent all values of the transformation matrix
var element = document.getElementById("elementID");
// returns matrix(1,0,0,1,0,0)
var matrix = window.getComputedStyle(element).transform;
var matrixArray = matrix.replace("matrix(", "").split(",");
var scaleX = parseFloat(matrixArray[0]); // convert from string to number
var scaleY = parseFloat(matrixArray[3]);
// bonus round - gets translate values
var translateX = parseFloat(matrixArray[4]);
var translateY = parseFloat(matrixArray[5]); // parseFloat ignores ")"
function getTransformValue(element,property){
var values = element[0].style.webkitTransform.split(")");
for (var key in values){
var val = values[key];
var prop = val.split("(");
if (prop[0].trim() == property)
return prop[1];
}
return false;
}
7条答案
按热度按时间yhived7q1#
找出文件与元素之间比例系数的最简单解决方案如下:
这是因为getBoundingClientRect返回实际尺寸,而offsetWidth/Height是未缩放的尺寸。
fjnneemd2#
如果它是由一个矩阵指定的我猜你不能用一种直截了当的方式,但你可以很容易地解析出这个值:
matches[1]
将包含scaleX,matches[2]
将包含scaleY。如果可能还应用了其他变换,则需要稍微调整正则表达式,因为现在它假定所有其他参数都为0。一种只获取比例值的方法可能是删除所有转换,测量计算出的元素的宽度/高度,然后将它们加回去并再次测量。然后将新值/旧值相除。我还没有尝试过,但它可能会起作用。jQuery本身使用类似的方法来进行许多测量,它甚至有一个未公开的
$.swap()
函数专门用于此。PS:你也在用
-o-transform
-moz-transform
和-ms-transform
,对吗?nue99wik3#
如果您只需要针对webkit(因为它是针对iPhone或iPad的),最可靠和快速的方法是使用webkit提供的本地javascript:
您可以在此处观看演示:http://jsfiddle.net/umZHA/
6psbrbz94#
您可以使用下列程式码:
7cwmlq895#
对OP来说太晚了,但在将来可能会有用。有一个直接的方法使用分裂来完成它:
这是webkit特有的,但可以很容易地扩展到更多的浏览器修改第一行。
u2nhd7ah6#
使用正则表达式
7nbnzgx97#
一种更可靠、更通用的方法来获得比例:
它将可视尺寸与未缩放尺寸进行比较。因此,即使是嵌套的缩放元素,它也可以工作。