Подтвердить что ты не робот

Матрица трансформации холста HTML5

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

Следующее нарисует круг в 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() для рисования на любой части моего холста, однако я не понимаю, как использовать его вообще.

4b9b3361

ОТВЕТЫ

Ответ 1

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

Ответ 2

Матрица преобразования умножается на каждую точку, прежде чем она нарисована на холсте. Как @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, и статья преобразования в Википедии более подробно расскажут о том, как все это работает.

Ответ 3

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