Как получить правильное значение degress от поворота style.transform после преобразования значений матрицы? - PullRequest
Новая
       42

Как получить правильное значение degress от поворота style.transform после преобразования значений матрицы?

0 голосов
/ 27 апреля 2018

Я пытаюсь получить степень поворота от поворота div, чтобы создать шаблон линии.

Только сейчас я столкнулся с проблемой. Мне нужно вращение (градус) от деления, чтобы вычислить, где должна появиться следующая строка. Но когда я пытаюсь получить значение из div с помощью style.transform и преобразовать значения матрицы, я все равно получаю неправильные градусы.

В моем тестовом случае у меня есть div, который поворачивается на 150 градусов, но я получаю 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();

Угол должен возвращать 150 градусов, а не 30 градусов, в противном случае мой оператор if не будет работать. Пожалуйста, помогите:)

1 Ответ

0 голосов
/ 27 апреля 2018

И 30 °, и 150 ° имеют одинаковый синус. Вы также должны принять во внимание косинус. Вместо Math.asin(b) используйте 

Math.atan2(b, a)

Кстати, если вы просто рассчитываете угол, чтобы снова вычислить его синус и косинус, то избавьтесь от этого шага (Math.sin(angle...)). У вас есть синус и косинус, так что просто используйте их.

...