Трехмерное орфографическое вращение двухмерной текстуры с использованием преобразований html-холста

Я огляделся вокруг и не могу найти ничего особенного в том, что я пытаюсь сделать.

Как следует из названия, я просто хочу смоделировать трехмерное ортогональное вращение, используя CanvasRenderingContext2D.setTransform() без перспективы, только ортогональное вращение.

Что я пробовал до сих пор:

Вращение вокруг вектора 45 * в 2D-плоскости достаточно просто, я использую

setTransform(scaleFactor, skewAngle, skewAngle, scaleFactor, 0.5*width, 0.5*height)

Как кажется, центр холста, тот же перекос x и y дает правильное вращение, но у меня возникают проблемы с определением коэффициента масштабирования, поскольку перекос достигает бесконечности, когда угол поворота (skewAngle) приближается к 90 *.

Что мне нужно: вращение и соответствующее масштабирование вокруг ЛЮБОГО вектора в 2D-плоскости, например. на основе перпендикулярного вектора к (mousePosition - centerCanvas) - перелистывание к (или от) курсора мыши.

Если кто-нибудь может сломать это для меня, я был бы очень признателен. Если есть статья, которая объясняет это конкретно, это тоже было бы здорово.

Заранее спасибо!


canvas rotation orthographic
person Nolo    schedule 28.01.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, так что я работаю над этим. Не слишком опасно.

Я делал это с трудом с setTransform().

Вот простой пример: // использование processing.js background(0);

// rotate by 5 degrees each frame
a = (a + 5) % 360;
var c = Math.cos(a * Math.PI / 180);

// processing.js provides mouseX and mouseY, width and height
var dx = mouseX - 0.5*width,
    dy = mouseY - 0.5*height;

// orthogonal to mouse position from center position
var b = Math.atan2(-dx, dy);

var ctx = this.externals.context;

ctx.save();
ctx.translate(0.5 * width, 0.5 * height);
ctx.rotate(b);
ctx.scale(1, c);
ctx.rotate(-b);
text("G", 0, 0);
ctx.restore();

ctx.save();
ctx.scale(1e-1, 1e-1);
// text size is 100px, position is centered at x, y
text("angle: " + a, 250, 50);
ctx.restore();
person Nolo    schedule 28.01.2016