这个问题之前已经在 StackOverflow 上被问过,与我的不同之处在于我希望能够检索负值并且还能够使用 transform
中的另一个参数检索它在我的例子中是 rotateZ(...deg)
。
我关注了另一篇关于如何获取 translate3d 值的帖子,建议的代码有效并且它获取正值而不是负值(缺少负号)。
另一个问题是,当我添加一个新的参数时,一切都不再起作用了,我希望能够添加任何参数并仍然让它起作用。
我认为这是正则表达式的问题,请参见 http://jsfiddle.net/Lindow/3gBYB/81/
正则表达式:
transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/)
Javascript:
function getTransform(el) {
var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))(?:, (-{0,1}\d+)), -{0,1}\d+\)|\(-{0,1}\d+(?:, -{0,1}\d+)*(?:, (-{0,1}\d+))(?:, (-{0,1}\d+))\))/);
if(!results) return [0, 0, 0];
if(results[1] == '3d') return results.slice(2,5);
results.push(0);
return results.slice(5, 8); // returns the [X,Y,Z,1] values
}
var slider = document.getElementById('slider');
var translation = getTransform(slider);
var translationX = translation[0];
var translationY = translation[1];
var absX = Math.abs(translationX);
var absY = Math.abs(translationY);
alert(absX + ' : ' + absY);
HTML/CSS:
<div id="slider"></div>
----
#slider {
-webkit-transform:translate3d(-393px, -504px, 0) rotateZ(30deg);
// remove rotateZ to make it work with positiv values
// number in translate3d may vary from -9999 to 9999
}
有什么建议吗?
最佳答案
我已经调整了您的 JSFiddle 答案以提供解决方案 - 更新了您的正则表达式以允许负数,并添加了一个方法“rotate_degree”,它将根据 computedStyle 矩阵计算旋转 Angular 。该值作为整数放置在结果数组的末尾。
解决方案在 JSFiddle 上:http://jsfiddle.net/Lymelight/3gBYB/89/
function getTransform(el) {
var transform = window.getComputedStyle(el, null).getPropertyValue('-webkit-transform');
function rotate_degree(matrix) {
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else {
var angle = 0;
}
return (angle < 0) ? angle +=360 : angle;
}
var results = transform.match(/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/);
var result = [0,0,0];
if(results){
if(results[1] == '3d'){
result = results.slice(2,5);
} else {
results.push(0);
result = results.slice(5, 9); // returns the [X,Y,Z,1] value;
}
result.push(rotate_degree(transform));
};
return result;
}
var slider = document.getElementById('slider');
var translation = getTransform(slider);
console.log(translation);
var translationX = translation[0];
var translationY = translation[1];
var absX = Math.abs(translationX);
var absY = Math.abs(translationY);
console.log('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3]);
alert('TrX: ' + translationX + ', TrY: ' + translationY + ' , Rotation Angle: ' + translation[3])
关于javascript - 如何检索 translate3d 的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44335496/