@VegasChickiChicki

Какое условие необходимо задать?

Суть в том ,что я при при движении мышки ,меняю значение стиля вот так :
canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";
(x - это отслеживание перемещения мышки ,горизонтально)
Но суть вопроса вот в чем ,я не могу понять ,как мне реализовать одновременно вращение по 2 осям ,относительно движения по 2 осям мышки ,т.е. если мышь движется горизонтально ,то стиль меняется вот так :
canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";

,а если вертикально ,то вот так :
canvas.style.transform = "rotate3d(0,1,0,"+x+"deg)";

Мне необходимо какое то условие ,которое отслеживало бы изменение координаты x и y ,увеличение или уменьшение.
Но я не могу понять ,как это условие задать в
if(//тут должно быть то самое условие ,которое проверят изменилась ли необходимая координата){
}

И должно получится ,что если изменилась одна координата ,выполняется присвоение одного свойства ,если другая ,присвоение другого. Не знаю насколько это правильно ,возможно будут более короткие решение ,буду очень рад вашей помощи.
Вот весь кусок кода JS:
var posXY_text = document.getElementById("posX");

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
        y = event.clientY/950*6;
    posXY_text.innerHTML = x.toFixed(2) + ":" + y.toFixed(2);

    canvas.style.transform = "rotate3d(1,0,0,"+x+"deg)";
    canvas_bg.style.transform = "rotate3d(1,0,0,"+x+"deg)";
};

Так же ,если кто-то знает ,по неизвестной мне причине линии двигают иногда медленнее чем должны ,не знаю с чем это связано,но буду очень рад ,если кто-то ответит мне и на этот вопрос.
Вот демо:
https://codepen.io/Poporo35/pen/GPxNyj
  • Вопрос задан
  • 124 просмотра
Решения вопроса 2
RAX7
@RAX7
Считай изменение координат мыши и по ним определяй куда двигается курсор, примерно так
https://codepen.io/anon/pen/JwLEGG?editors=1010
Ответ написан
kshshe
@kshshe
Frontend developer
Почти никогда курсор не будет двигаться так, чтобы координаты менялись только по одной оси, но, если я понял вопрос правильно, такое решение может быть полезным:

let oldX, oldY;

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
         y = event.clientY/950*6;

     if (oldX !== x) {
          // Изменился x
          ...
     } elseif (oldY !== y) {
          // Изменился y
           ... 
     }
     oldX = x;
     oldY = y;
    ...


Как вариант, можно проверять не на равенство, а на изменение в каких-то пределах:
const X_MAX_DIFF = ...;
const Y_MAX_DIFF = ...;
let oldX, oldY;

document.onmousemove = function f32() {
    let x = event.clientX/192.0*3,
         y = event.clientY/950*6;

     if (Math.abs(oldX - x) < X_MAX_DIFF) {
          // Изменился x
          ...
     } elseif (Math.abs(oldY - y) < Y_MAX_DIFF) {
          // Изменился y
           ... 
     }
     oldX = x;
     oldY = y;
    ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы