HTML5 Матрица преобразования холста

Question

Я не понимаю, что такое Матрица преобразования и как с ней работать.

Следующее нарисует круг на 0, 0 моего холста: (генерируется из SVG, преобразованного с помощью svg2canvas.jar)

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

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

Answer 1

Матрица преобразования умножается на каждую точку, прежде чем она будет нарисована на холсте.Как сказал @Eric, это матрица аффинного преобразования из линейной алгебры.В вашем примере это будет работать так:

[ x']   [ 1 0 -551.23701 ] [ x ]   [ x - 551.23701 ]
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ]
[ 1 ]   [ 0 0    1       ] [ 1 ]   [       1       ]

Таким образом, он смещает координаты x и y на -551.23 ... и -368.42 ... соответственно.

Другие типыпреобразования включают в себя различные «слоты» в матрице.Например, вот матрица, которая масштабирует чертеж на sx и sy (масштабные коэффициенты x и y):

[ sx  0 0 ]
[  0 sy 0 ]
[  0  0 1 ]

и поворот (угол в радианах):

[ cos(angle) -sin(angle) 0 ]
[ sin(angle)  cos(angle) 0 ]
[     0           0      1 ]

Преимущество использования матрицы преобразования перед вызовом отдельных методов, таких как translate, scale и rotate, состоит в том, что вы можете выполнить все преобразования за один шаг.Однако это становится сложным, когда вы начинаете комбинировать их нетривиальными способами, потому что вам нужно умножить матрицы вместе, чтобы получить конечный результат (это то, что функции типа scale и т. Д. Делают для вас).Почти всегда проще вызывать каждую функцию, а не вычислять ее самостоятельно.

Ссылки, о которых упоминал @Eric, и статья с матрицей преобразования в Википедии подробно рассказывают о том, как все это работает.

Answer 2

Матрица преобразования, на которую они ссылаются, является общей матрицей преобразования, найденной в линейной алгебре.Эти аргументы образуют матрицу преобразования, которую вы хотите применить к своим координатам для заданных фигур или путей.Эта страница описывает метод преобразования.Пожалуйста, обратите особое внимание на матрицу, которую они определяют в сигнатуре метода для преобразования.Он показывает, какие параметры находятся в матрице преобразования.Теперь, пожалуйста, также обратитесь к следующей ссылке .Если вы прокрутите вниз, вы увидите, что означает каждый элемент в матрице преобразования.Например, элемент [0,0] (параметр a из сигнатуры метода преобразования HTML5) матрицы преобразования представляет, как координата будет масштабироваться в направлении X.Надеюсь, это поможет,

Answer 3

Я реализовал очень простой класс преобразования для отслеживания матрицы преобразования Canvas. Вы можете использовать его, чтобы увидеть, как работает матрица и что она делает.Класс также позволит вам отслеживать матрицу, поскольку Canvas не позволит вам извлечь текущую матрицу.

Answer 4

Я нашел примеры на странице Apple полезными для понимания матрицы преобразования:

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html