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

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

Answer 1

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

Math.atan2(b, a)

顺便说一下，如果你只是计算角度来再次计算它的正弦和余弦，那么请保留这一步（Math.sin(angle...))。你在那里有正弦和余弦，所以只需使用它们。

在转换矩阵值后，如何从style.transform旋转得到正确的degress？

1 个答案: