javascript - library - ¿Qué es una "matriz" para en Rafael?

raphael js map

Question

Estoy tratando de entender mejor a raphael.js en general, pero he encontrado que la documentación de raphael.js puede ser confusa a veces y otras veces un poco vaga.

¿Puede alguien explicarme para qué es la matriz y cómo se usa?

Answer 1

Además de lo anterior, Raphael una vez se limitó a traducir solo la escala de rotación, pero con la exposición de Matrix de los autores a la sintaxis, cualquier transformación es posible para gráficos 2D.

Vaya a http://www.irunmywebsite.com/raphael/additionalhelp.php para ver ejemplos interactivos. Puede filtrar seleccionando "matriz" en el menú desplegable y revisando esos ejemplos. También puede buscar por Matrix para obtener un subconjunto diferente de ejemplos.

Por ejemplo, hay un tipo de transformación llamada ''sesgo''. Si busca esto en la página, verá otro ejemplo que lo muestra.

No seas tímido con Matrix, es un tema interesante.

En el iPod así no se pudo hipervínculo

Answer 2

Casi no hay información buena y clara sobre Matrix en Raphael en ninguna parte. Sin embargo, la buena noticia es que es casi exactamente lo mismo que las transformaciones de Matrix en SVG y también en CSS3.

Hay algunas guías para transformar matrices en SVG, pero generalmente asumen que ya entiendes matrices matriciales. No sirve de mucho si no lo haces.

Hay, sin embargo, una buena guía sobre matrices en CSS3 . También viene con un conjunto de construcción Matrix (a partir de febrero de 2013, no funciona en Chrome, pero sí funciona en Firefox). Dado que los principios matemáticos detrás de CSS3 y las transformaciones matriciales de Raphael son esencialmente los mismos, puede utilizar esta herramienta para generar un conjunto de números de transformadas matriciales y luego aplicarlos en Raphael y debería ser más o menos el mismo resultado.

Visión general súper rápida de lo que son las transformaciones de Matrix:

• Es un conjunto de 6 números que se utilizan para calcular dónde estará cada esquina del cuadro delimitador de una forma de Raphael después de que se haya completado la transformación. Entre ellos, estos 6 números pueden crear prácticamente cualquier efecto de escala, transformación, rotación y corte.
• Es el motor detrás de escena para las transformaciones de Raphael: Raphael traduce las transformadas en coordenadas matriciales. Las coordenadas de la matriz pueden volverse realmente alucinantes: a menos que esté haciendo algo extremadamente complejo, generalmente es mejor dejar que lo haga bajo el capó.
• Aquí hay una broma de XKCD que ilustra la relación matemática entre los 6 números detrás de las transformaciones matriciales. Encontrarás esto gracioso, o te convencerá de que es mejor dejar que Raphael haga los cálculos debajo del capó ...

• Para mirar el estado actual de la matriz de un elemento :
  • Para ver directamente el objeto de la matriz del elemento: someElement.matrix es un objeto con cada número dado por letra (por ejemplo, {a:1,b:0,c:0,d:1,e:0,f:0} . estos directamente no cambian el objeto (por lo que no puede hacer someElement.matrix.b = 3; )
  • Puede realizar una conversión inversa de la matriz actual en un objeto más legible para el ser humano que contenga atributos de transformación utilizando someElement.matrix.split()
  • También puede realizar una conversión inversa de la matriz en una cadena de transformación con someElement.matrix.toTransformString();
• Si necesita establecer una matriz manualmente , puede hacerlo de una de estas formas. Todos estos reemplazan o animan de la transformación anterior:
  • Animado (usando una matriz) : someElement.animate({transform: [''m'',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
  • Instantáneo (usando una matriz) : someElement.transform([''m'',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
  • Animado (usando cadena) : someElement.animate({transform: ''m0.5 -0.5 0.5 0.5 -0.5 0.5''}, 1000);
  • Instantáneo (utilizando una cadena) : someElement.transform(''m0.5 -0.5 0.5 0.5 -0.5 0.5'');
• Esta es la cadena de matriz predeterminada: 1 0 0 1 0 0 . Aplicar esto restablece una transformación a su estado predeterminado.
• Lo que significa cada número de matriz es muy difícil de caracterizar. En forma aislada , funciona como escala x, b como cizalla y, c como cizalla, d como escala y e y f como x y y se mueven. Pero interactúan de manera matemáticamente compleja. No es simple

Answer 3

No conozco a Raphaël, pero al mirar los documentos y conocer otras API de dibujo, haré una conjetura semi-educada.

En los gráficos (Raphaël y en cualquier otro lugar) se usan matrices para transformar (mover, rotar, etc.) la obra de arte. Encontrarás una API similar para el propio elemento de canvas HTML5.

Cuando utiliza el método Element.transform para mover y rotar la superficie de dibujo. Como mover un pedazo de papel debajo de su pluma antes de comenzar a dibujar nuevamente. Internamente, tales transformaciones se realizan utilizando una matriz de transformación. Es una característica muy útil, aunque un poco críptica al principio. De hecho, también es así como funcionan los gráficos en 3D.

Además, las matrices se pueden agregar una a la otra, de modo que puede tener una matriz que se traduce horizontalmente, una que se traduce verticalmente, y una que rote (y así sucesivamente), y sumarlas para obtener los efectos combinados.

De nuevo, estoy extrapolando aquí; No conozco a Raphaël. Pero ese es el uso básico de matrices en gráficos.