javascript - 转换矩阵值后，如何从 style.transform 旋转获得正确的度数？

Question

我正在尝试从 div 获取旋转度数，我旋转以创建线条图案。

现在我遇到了一个问题。我需要 div 的旋转(度)来计算下一行需要出现的位置。但是当我尝试使用 style.transform 从 div 获取值并转换矩阵值时，我仍然得到错误的度数。

在我的测试用例中，我有一个旋转 150 度的 div，但我得到了 30 度，不幸的是，这对我不起作用。请帮忙，我如何取回 150 度值？

这是代码:

HTML:

<div class="linesBox" id="linesBox">
    <div class="line1 lines" id="line1" style="float: left;
    margin: 200px 0 0 100px;
    position: fixed;
    border-top:0.5px solid black;
    width: 100px;
    transform: rotate(150deg);"></div> 
    <!-- <div class="line2 lines" id="line1" style="float: left;
    margin: 174px 0 0 193.3px;
    position: fixed;
    border-top:0.5px solid black;
    width:100px;
    transform: rotate(0deg);"></div> -->



</div>

JavaScript:

const linesBox = document.getElementById('linesBox');

let lastLineWidth;
let angle;
let lineWidthCount;
let lineHeightCount;

function createLines(){

//Last line div in a var and a var to get the computated value 
let lastLine = linesBox.lastElementChild;
var st = window.getComputedStyle(lastLine, null);

//Get the width and angle of the last line and place them in a var
lastLineWidth = parseFloat(lastLine.style.width);
lastLineXPos = parseFloat(lastLine.style.marginLeft);
lastLineYPos = parseFloat(lastLine.style.marginTop);
let lastLineAngle = st.getPropertyValue("transform");
console.log(lastLineWidth, lastLineXPos, lastLineYPos);

//Get and map the Matrix value from transform rotate() and set it to lastLineAngle
var values = lastLineAngle.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');

//Set each value of the matrix values to a var
let a = values[0]; 
let b = values[1]; 
let c = values[2];
let d = values[3]; 

//Take the correc value from the matrix values and place it in the formula and save the outcome in a var
angle = Math.round(Math.asin(b) * (180/Math.PI));
console.log(angle);

//Calculate margin left starting position for the next line
//Get sin en cos values by angle 
let yChangeOne = lastLineWidth * Math.sin(angle / 180 * Math.PI) / 2;
let xChangeOne = parseFloat(lastLineWidth - lastLineWidth * Math.cos(angle / 180 * Math.PI)) / 2;


// let yChangeOne = lastLineWidth * sinOutcome / 2;
// let xChangeOne = lastLineWidth - lastLineWidth * cosOutcome; 
console.log(yChangeOne, xChangeOne);

let newYPos;
let newXPos;

if( angle <= 89 && angle >= 1 ){
    newYPos = lastLineYPos + yChangeOne;

} else if ( angle >= 91 && angle <= 179 ){
    newYPos = lastLineYPos - yChangeOne;
}
console.log(newYPos);} 

  //Get the start position for the next line  
  createLines();

Angular 应该返回 150deg 而不是 30deg，否则我的 if 语句将不起作用。请帮忙:)

Answer 1

30° ​​和 150° 具有相同的正弦值。您还需要考虑余弦。使用

代替 Math.asin(b)

Math.atan2(b, a)

顺便说一句，如果您只是计算 Angular 以再次计算其正弦和余弦，则无需执行此步骤(Math.sin(angle...))。那里有正弦和余弦，所以只需使用它们即可。