2d canvas поворот проекции от определенной точки на экране, с сохранением положения

@NANO_VIRUS · Регистрация: 19.09.2015

Author24 — интернет-сервис помощи студентам

Всем здравствуйте. В заранее извините, если пишу не в том разделе.

Есть некий объект/объекты на плоскости, проекцию которой я, вращаю относительно точки нажатой на экране. Используя функцию rotate()

Точку, относительно которой происходит вращение, получаю за счет смещения проекции translate()

Javascript

    // сделаем первое вращение на 45 градусов относительно координат (100, 100)
 
    // базовая позиция проекции
    var x = 0; 
    var y = 0;
 
    // координаты первой точки
    var x1 = 100;
    var y1 = 100;
 
    var rad1 = (Math.PI/4);
    var rad2 = (Math.PI/2);
 
 
    ctx.translate(x1, y1);
 
    ctx.rotate(rad1); // 45
    
    ctx.translate(-x1, -y1);
 
    // Совершим последующее вращение на 90 градусов, уже относительно координат (200, 200) и с учетом предыдущего сохранения вращения
 
    // получаем расстояние от первых координат до новой точки
    var dist = Math.sqrt(sqr(x1 - 200) + sqr(y1 - 200));
 
    // координаты второй точки с учетом измененного вращения
    var x2 = Math.cos(rad1)*dist+x1;
    var y2 = Math.sin(rad1)*dist+y2;
 
 
    ctx.translate(x2, y2);
 
    ctx.rotate(rad2); // 90
    
    ctx.translate(-x2, -y2);

Моя задача, найти вторую точку и последующие использую rotate() всего один раз. Если проще, то я хочу вращать свою проекцию с сохранением неограниченное количество раз. Но после каждого вращения добавлять + один rotate в код со смещением будет не правильно. Визуальный пример работы можно взять с карты мира, в которой есть возможность вращения.

	07.03.2020, 15:41