转换矩阵值后，如何从style.transform rotation获得正确的转折？

Question

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

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

在我的测试案例中，我有一个div旋转了150度，但是我又返回了30度，这对我来说是行不通的。 请帮助，如何获得150deg的值？

这是代码：

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();

角度应返回150deg而不是30deg，否则我的if语句将不起作用。 请帮忙 ：）

Answer 1

30°和150°具有相同的正弦。 您还需要考虑余弦。 代替Math.asin(b) ，使用

Math.atan2(b, a)

顺便说一句，如果您只是在计算角度以再次计算其正弦和余弦，则Math.sin(angle...))这一步（ Math.sin(angle...)) 。 您正好有正弦和余弦，因此只需使用它们即可。