Что такое "матрица" для raphael

Ответ 1

В Рафаэле практически нет хорошей, четкой информации о Матрице. Тем не менее, хорошая новость заключается в том, что это почти то же самое, что преобразования Matrix в SVG, а также CSS3.

Есть несколько руководств по преобразованию матриц в SVG, но они обычно предполагают, что вы уже понимаете математические математические вычисления. Не очень полезно, если вы этого не сделаете.

Однако есть одно хорошее руководство по математике в CSS3. Он также поставляется с Matrix Construction Set (по состоянию на февраль 2013 года он не работает в Chrome, но работает в Firefox). Поскольку математические принципы матричных преобразований CSS3 и Raphael по существу одинаковы, вы можете использовать этот инструмент для создания набора чисел матричного преобразования, а затем применить их в Raphael, и это должен быть более или менее одинаковый результат.

Супер-быстрый обзор того, что Матричные преобразования:

• Это набор из 6 чисел, которые используются для вычисления, где каждый угол ограничивающей рамки формы Рафаэля будет после завершения преобразования. Между ними эти 6 чисел могут создавать практически любые эффекты масштаба, трансформирования, поворота и сдвига.
• Это за кадром движок для преобразований Рафаэля: Рафаэль переводит преобразования в матричные координаты. Матричные координаты могут серьезно поразиться: если вы делаете что-то чрезвычайно сложное, обычно лучше всего просто позволить ему делать это под капотом.
• Здесь шутка XKCD, иллюстрирующая математическую связь между 6 числами за матричными преобразованиями. Вы либо найдете это смешным, либо убедите вас, что лучше всего позволить Рафаэлю делать сами математику под капотом. .

• Чтобы посмотреть состояние текущей матрицы элементов:
  • Чтобы напрямую посмотреть на элемент-матрицу: someElement.matrix - это объект с каждым числом, заданным буквой (например, {a:1,b:0,c:0,d:1,e:0,f:0}). Установка этих параметров напрямую не изменяет объект (поэтому вы не можете сделать someElement.matrix.b = 3;)
  • Вы можете преобразовать текущую матрицу в более удобный для человека объект, содержащий атрибуты преобразования, используя someElement.matrix.split()
  • Вы также можете перевернуть матрицу в строку преобразования с помощью someElement.matrix.toTransformString();
• Если вам нужно установить матрицу вручную, вы можете сделать это одним из этих способов. Все они заменяют или оживляют предыдущее преобразование:
  • Анимированный (с использованием массива): someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
  • Мгновенный (с использованием массива): someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
  • Анимированная (с использованием строки): someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
  • Мгновенный (с использованием строки): someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');
• Это строка матрицы по умолчанию: 1 0 0 1 0 0. Применяя это, сбрасывается преобразование в состояние по умолчанию.
• То, что означает каждый номер матрицы, очень сложно охарактеризовать. В отдельности a работает как x-scale, b как y-shear, c как x-shear, d как y-scale, и e и f как x и y перемещаются. Но они взаимодействуют математически сложными способами. Это не просто.

Ответ 2

Не знаю Рафаэля, но, глядя на документы и зная другие API-интерфейсы рисования, я получу полуобученную догадку.

В графических (Raphaël и где-либо еще) матрицах используются для преобразования (перемещения, поворота и т.д.) изображений. Вы найдете аналогичный API для самого HTML5 canvas.

Когда вы используете метод Element.transform для перемещения и поворота поверхности чертежа. Как перемещение листка бумаги под ручкой, прежде чем вы начнете рисовать снова. Внутри такие преобразования выполняются с использованием матрицы преобразования. Это очень полезно, если сначала немного загадочно. На самом деле, как работает 3D-графика.

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

Опять же, я экстраполирую здесь; Я не знаю Рафаэля. Но это основное использование матриц в графике.

Ответ 3

Кроме того, в дополнение к вышесказанному, Рафаэль когда-то ограничивался только поворотным трансляцией шкалы, но при экспонировании авторов матрицей в синтаксисе любое преобразование возможно для 2-й графики

Перейдите к http://www.irunmywebsite.com/raphael/additionalhelp.php для интерактивных примеров. Вы можете фильтровать, выбирая "matrix" в раскрывающемся списке и просматривая эти примеры. Вы также можете выполнить поиск по Матрице, чтобы получить другое подмножество примеров.

Например, существует тип преобразования, называемый "skew" Если вы ищете это на странице, вы увидите еще один пример, показывающий это.

Не стесняйтесь Матрицы, это интересный предмет

На iPod, поэтому гиперссылка