Share
Los gráficos avanzados son una gran parte de la web en estos días, pero hay un par de renderizadores diferentes en la mezcla. Podrías usar lienzo, por supuesto; Pero SVG y WebGL también son opciones. En este tutorial, revisaremos una biblioteca de dibujo relativamente nueva, two.js, que proporciona una API que hace lo mismo con los tres renderizadores. Si estás listo, echemos un vistazo!
El primer paso es crear un dos Instalarlo y ponerlo en la página. los Dos Contstructor toma un objeto con una serie de parámetros:
var two = new Two (fullscreen: true);
En este caso, estamos utilizando el pantalla completa Opción, que hace que el área de dibujo ocupe toda la ventana del navegador. Si quisiéramos que nuestra área de dibujo tuviera un tamaño específico, podríamos usar el anchura y altura propiedades en su lugar; ambos toman un número para un valor de píxel. También está el autoencendido parámetro; si se establece en verdadero, todas las animaciones se ejecutarán de inmediato cuando se cargue la página.
También está el tipo parámetro: esto decide qué renderizador se utilizará. Puedes elegir entre canvas, SVG, y WebGl. Sin embargo, no solo escribe el nombre: usa una constante de biblioteca de tipo: o bien Two.Types.canvas, Two.Types.svg, o Two.Types.webgl. Para ser claros, two.js usará por defecto el uso de SVG; no hace ningún tipo de detección de características para ver qué es compatible con el navegador. Tendrá que hacerlo por su cuenta (y creo que es una buena idea: herramientas pequeñas, una cosa bien y todo eso).
Entonces, una vez que tengamos un Dos ejemplo, ¿qué hacemos con él. Primero, querrás adjuntarlo a la página. Tiene un añadir a método que toma un elemento HTML como parámetro, así que configuremos esto:
Entonces, en main.js, empezamos con esto:
Accentsconagua
var el = document.getElementById ("main"), two = new Two (fullscreen: true); two.appendTo (el); Con todo esto configurado, estamos listos para dibujar algunas formas..
Comenzaremos con formas básicas; Si bien podemos crear nuestras propias formas complejas con nuevo Two.Polygon, Las formas más simples se pueden hacer con algunos métodos prácticos..
Vamos a empezar con los círculos. los makeCircle La función toma tres parámetros:
var circle = two.makeCircle (110, 110, 100); circle.fill = "# 881111"; two.update ();
Repasaremos desde abajo, arriba: la llamada a dos.update Las actualizaciones son área de dibujo y en realidad representa el contenido. Al retroceder hacia el círculo, los primeros dos parámetros son las coordenadas x e y para el centro del círculo. Entonces, el tercer parámetro es el radio para el círculo. Todos dos.hacer ... las funciones devuelven un Dos.poligono objeto. A medida que avancemos en este tutorial, verás varias propiedades y métodos que puedes usar en estas formas. Aquí está el primero: llenar. Como puede imaginar, establece el color de relleno: cualquier CSS válido funcionará.
El resultado debería verse así:
Ahora, ¿qué pasa con los rectángulos? los dos.makeRectangle El método toma cuatro parámetros. Al igual que el círculo, los dos primeros parámetros marcan el X y y Coordenadas para el centro del rectángulo. Entonces, param tres es anchura y param cuatro es el altura del rectángulo.
var rect = two.makeRectangle (115, 90, 150, 100); rect.fill = "naranja"; rect.opacidad = 0.25; rect.noStroke (); two.update ();
Una vez más, estamos usando el llenar propiedad. También estamos usando el opacidad propiedad, que acepta un valor decimal entre 0 y 1; Aquí tenemos un cuarto de opacidad. Finalmente, estamos usando el no Stroke Método, que elimina el trazo (borde) del rectángulo. Esto es lo que tenemos:
Los puntos suspensivos también son bastante simples: como puede suponer, los dos primeros parámetros establecen el centro de la elipse. Entonces, tenemos ancho y alto:
var elipse = two.makeEllipse (100, 40, 90, 30); ellipse.stroke = "# 112233"; ellipse.linewidth = 5; ellipse.noFill (); two.update ();
Para nuevas propiedades: tenemos carrera, que establece el color del borde; para establecer el ancho de ese borde, usamos el grosor de línea propiedad. Entonces recuerda no Stroke? los sin relleno El método es el mismo, excepto que elimina el color de relleno de nuestra forma (sin eso, nuestras formas se predeterminan a un relleno blanco).
Por supuesto, las formas más simples son las líneas..
var line = two.makeLine (10, 10, 110, 210); line.linewidth = 10; line.stroke = "rgba (255, 0, 0, 0.5)";
Los dos primeros parámetros son los X y y por un extremo de la línea; El segundo set son para el otro extremo..
Probablemente la forma más incómoda de crear es la curva. los dos.makeCurve método toma tantos conjuntos de x, y parámetros como desee: cada par es un punto donde la línea se curva. Entonces, el último parámetro es un booleano: hazlo cierto Si la forma está abierta, significa que los extremos no se conectan. Si desea que two.js dibuje una línea que conecta los dos extremos de las curvas, debería ser falso.
curva var = two.makeCurve (110, 100, 120, 50, 140, 150, 160, 50, 180, 150, 190, 100, verdadero); curve.linewidth = 2; curve.scale = 1.75; curve.rotation = Math.PI / 2; // Curva de un cuarto de vuelta. NoFill ();
Ya sabes grosor de línea, pero que pasa escala? Podemos usar esto para encoger o expandir nuestra forma; Aquí, estamos expandiendo la forma en un 175%. Entonces, podemos usar rotación para girar nuestra forma por una serie de radianes; Estamos haciendo 90 grados, que son radianes medio PI.
Finalmente, puedes pensar que ya que hemos abierto la forma, no obtendremos un relleno; pero eso no es cierto. Una curva no cerrada todavía tendrá un relleno, por lo que estamos usando sin relleno Para eliminar el relleno y terminar solo con la curva..
El último tipo de forma es el catch-all: es el polígono general. En realidad, es casi como la curva, excepto que las líneas van directamente de un punto a otro.
var poli = two.makePolygon (110, 100, 120, 50, 140, 150, 160, 50, 180, 150, 190, 100); poly.linewidth = 4; poli.translation = new Two.Vector (60, 60); poly.stroke = "#cccccc"; poly.fill = "#ececec";
Al igual que con la curva, tenemos tantos pares de coordenadas como nos gustaría, y luego el booleano abierto; aquí lo estamos configurando para falso, entonces la forma estará cerrada.
También estamos estableciendo un traducción aquí; Esto nos permite mover la forma hacia la izquierda o hacia la derecha y hacia arriba o hacia abajo. Estamos configurando el traducción propiedad a un Dos.vector ejemplo. los Dos.vector constructor toma dos parámetros: un X y un y. Estas terminan siendo las coordenadas del centro de la forma. No es necesario crear un nuevo vector para esto; simplemente puede asignar el X y y directorio de valores:
poli.translation.x = 60; poli.translation.y = 60;
Esto es lo que obtenemos:
Hasta ahora, hemos estado trabajando con objetos de formas individuales; Sin embargo, es posible agrupar formas e interactuar con ellas como una sola pieza..
Puedes hacer un grupo con el dos.makeGroup método. Entonces, podemos usar su añadir Método para agregar una forma al grupo..
grupo var = two.makeGroup (), rect = two.makeRectangle (0, 0, 100, 100), circ = two.makeCircle (50, 50, 50); rect.fill = "rojo"; circ.fill = "azul"; group.add (rect); group.add (circ); two.update ();
Si ejecuta esto, es bastante básico; al igual que lo haría sin la grupo pedacitos.
Pero entonces, podemos trabajar con el grupo, usando cualquiera de las transformaciones que podemos hacer en una forma individual. Por ejemplo, ¿qué tal una traducción??
group.translation.x = 100; group.translation.y = 100; two.update ();
Al igual que con las formas regulares, los grupos se ordenan desde el principio hasta el final, a medida que se crean. Sin embargo, si agrega una forma a un grupo y luego a otro grupo, se eliminará del primer grupo. Esto es genial si necesitas cambiar el orden de adelante hacia atrás de las formas cuando animas (lo cual haremos). Entonces, si empezamos con esto:
var topGroup = two.makeGroup (), bottomGroup = two.makeGroup (), rect = two.makeRectangle (100, 100, 100, 100), circ = two.makeCircle (150, 150, 50); rect.fill = "rojo"; circ.fill = "azul"; topGroup.add (rect); topGroup.add (circ); two.update ();
Tenemos lo mismo que arriba:
Pero, si añadimos el rect al grupo de fondo en lugar…
bottomGroup.add (rect);
Ahora, nuestra plaza está en la parte superior..
Finalmente, hablemos de animación. Ya sabes que two.js representa las formas que has creado cuando llamas dos.update (). Si llamas dos.jugar () en cambio, es como llamar actualizar() repetidamente, utilizando el marco de animación de solicitud. Cada vez que esto sucede, two.js dispara un evento de "actualización". Así es como podemos producir animación: escuche el evento de "actualización"; y cuando suceda, ejecute una función para configurar el siguiente fotograma.
Hasta ahora, nuestros ejemplos han sido bastante simples, así que vamos a avanzar un poco más: crearemos un planeta en órbita con su propia luna en órbita. Recuerda, comenzamos creando dos instancias:
var el = document.getElementById ("main"), two = new Two (fullscreen: true). appendTo (el); A continuación, tenemos que configurar algunas variables.
var earthAngle = 0, moonAngle = 0, distancia = 30, radio = 50, relleno = 100, órbita = 200, desplazamiento = órbita + relleno, órbitas = two.makeGroup ();
Vamos a incrementar tierra y lunaAngle para conseguir nuestro planeta y la luna alrededor de sus órbitas. los distancia variable es cuán lejos estará nuestra luna de nuestra tierra. los radio es el raduis de nuestro planeta tierra, y el relleno es cuánto espacio tendrá nuestro planeta fuera de su órbita. Dicha órbita proviene de la orbita variable. los compensar variable es la distancia a la que se desplazará nuestro planeta desde el borde del lienzo. Finalmente, el órbitas El grupo mantendrá los dos círculos de órbita, lo que nos permitirá mostrarlos u ocultarlos a voluntad. No te preocupes si estás un poco confundido; Verás cómo todos trabajan juntos en un segundo.
Comenzaremos con la línea de órbita de la tierra. Por supuesto, eso es sólo un círculo simple:
var earthOrbit = two.makeCircle (offset, offset, orbit); earthOrbit.noFill (); earthOrbit.linewidth = 4; earthOrbit.stroke = "#ccc"; orbits.add (earthOrbit); two.update ();
Aquí no hay nada nuevo. Esto es lo que deberías ver:
Entonces, necesitamos crear un planeta y colocarlo en su órbita. Primero, necesitamos un medio para averiguar dónde se debe colocar el planeta en la órbita; Y, por supuesto, esto debe cambiar para cada fotograma de animación. Entonces, vamos a crear una función que devolverá el centro X y y Coordenadas de la órbita según el ángulo actual para posicionarse alrededor del círculo y el radio de la órbita:
función getPositions (ángulo, órbita) return x: Math.cos (ángulo * Math.PI / 180) * órbita, y: Math.sin (ángulo * Math.PI / 180) * órbita;
Sí, es un poco de trigonometría, pero no se preocupe demasiado: básicamente, estamos convirtiendo el ángulo (que es un grado) en un radián, usando los métodos de seno y coseno de JavaScript, y luego lo multiplicamos por el orbita. Ahora, podemos usar esta función para agregar la tierra a la imagen:
var pos = getPositions (earthAngle ++, orbit), earth = two.makeCircle (pos.x + offset, pos.y + offset, radio); earth.stroke = "# 123456"; ancho de línea terrestre = 4; earth.fill = "# 194878";
Comenzamos por conseguir el puesto para el primero. tierra (valor de 0, ¿recuerdas?); entonces, hacemos nuestro tierra Basado en esas posiciones (más el desplazamiento) y coloréalo. Esto es lo que terminamos con:
Ahora, animemos este planeta. El código de enlace de evento en realidad proviene directamente de Backbone, por lo que puede parecer familiar:
two.bind ("update", function (frameCount) var pos = getPositions (earthAngle ++, orbit); earth.translation.x = pos.x + offset; earth.translation.y = pos.y + offset;); dos.jugar (); Lo que está pasando aquí es que cada vez que el actualizar evento ocurre, estamos usando el obtener posiciones Función para calcular la posición para el próximo ángulo en la tierra. Entonces, solo tenemos que establecer el centro de la tierra en esas nuevas posiciones, más el desplazamiento. Finalmente, llamamos dos.jugar () para iniciar los eventos de actualización. Si recargas la página ahora, deberías ver la tierra girando alrededor de la órbita.
Buen trabajo hasta ahora, ¿eh? Ahora, ¿qué hay de la luna y su trayectoria de órbita; esto irá por encima de la enlazar declaración.
var moonOrbit = two.makeCircle (earth.translation.x, earth.translation.y, radio + distancia); moonOrbit.noFill (); moonOrbit.linewidth = 4; moonOrbit.stroke = "#ccc"; orbits.add (moonOrbit); var pos = getPositions (moonAngle, radio + distancia), moon = two.makeCircle (earth.translation.x + pos.x, earth.translation.y + pos.y, radius / 4); moonAngle + = 5; moon.fill = "# 474747";
Esto se parece mucho al código del planeta: centramos el círculo de la órbita de la luna en el centro de la tierra usando su traducción propiedades; su radio es el radio de la tierra más la distancia que la luna debe estar alejada de la tierra. De nuevo, agregamos el órbita de la luna al órbitas grupo.
A continuación, creamos la luna, obteniendo primero la posición deseada y creando un círculo en esa ubicación. Para un radio, usaremos un cuarto del radio que usamos para la Tierra. Estaremos incrementando el ángulo de la luna en 5 cada vez, por lo que se moverá más rápido que la Tierra..
Desactivando la animación (comentando el dos. declaración), obtenemos esto:
Último paso: consigue que la luna se anime. Dentro de ese mismo dos. declaración, agregue estas lineas:
var moonPos = getPositions (moonAngle, radio + distancia); moon.translation.x = earth.translation.x + moonPos.x; moon.translation.y = earth.translation.y + moonPos.y; moonAngle + = 5; moonOrbit.translation.x = earth.translation.x; moonOrbit.translation.y = earth.translation.y;
Al igual que antes, obtenemos la nueva posición para la luna y la posicionamos en relación con la tierra. Luego, también movemos el anillo orbital de la luna para que permanezca centrado en la tierra..
Con todo esto en su lugar, nuestro pequeño ejemplo está completo: Aquí hay una instantánea de la acción:
Como dije, también podemos ocultar las órbitas. Ya que ambos están en el órbitas grupo, podemos usar el visible propiedad del grupo:
orbits.visible = false;
Y ahora:
Bueno, eso es un resumen de este tutorial. ¿Crees que usarás two.js en alguno de tus propios proyectos? ¿O tal vez tienes una mejor alternativa? Vamos a escucharlo en los comentarios.!
