SVGs como código: iconos interactivos y manipulación de imágenes fácil

1. Sumérgete: Hola allá, Cable aquí y bienvenidos a este curso sobre SVG como Código. Con el auge de la web responsive, SVG se han vuelto muy populares. Por una buena razón, son imágenes vectoriales, lo que significa que esto se pone perfectamente arriba o abajo con el tamaño de la pantalla. No obstante, hay una razón aún más importante por la que los SVG son tan poderosos. SVG son código al igual que el HTML. Eso significa que podemos manipularlos con las mismas herramientas con CSS y con JavaScript. En este curso, vamos a sumergirnos en lo que eso significa. Vamos a echar un vistazo a los SVG. ¿ Cuál es este código? ¿Qué aspecto tiene? Vamos a empezar a jugar con cómo aplicamos CSS para hacerlos un poco interactivos, cambiar de color basado en el hover o aplicar una clase CSS. Después nos vamos a sumergir en algunas de las características más avanzadas de los SVG, cómo podemos usar filtros para poner imágenes y luego cambiar su color, agregar desenfoque, enmascarar piezas que no queremos, todo cosas divertidas. Usaremos JavaScript para hacer esto interactivo para que al final del curso, construyas un editor de fotos igual que podrías encontrar en Instagram o Snapchat, donde puedes poner una foto, aplicarla filtros personalizados, y luego descarga esa imagen para usarla donde quieras. Espero que estés tan emocionado como yo. Acompáñame en el siguiente video. 2. SVG como código: Vamos a sumergirnos en lo que constituye un SVG. Para que esto sea fácil, he creado un SVG un poco sencillo. Acabo de armar esta carita usando Sketch. Se puede ver que no soy mucho artista, pero esto usa un montón de elementos diferentes dentro de SVG que nos permitirán explorar cuáles son esas cosas y cómo están disponibles para nosotros. Si estás siguiendo en casa, haz clic a través del bolígrafo, solo tienes que hacer clic en Tenedor, puedes jugar con él tú mismo, y puedes ver lo que obtenemos de inmediato es una mirada en. Aquí está nuestra imagen, y aquí está el código que está generando esa imagen. Vamos a sumergirnos en lo que son esas piezas. Se puede ver que está estructurado bastante similar a HTML. Tienes un elemento externo que en lugar de decir HTML es SVG, podemos ignorar esta versión XML. De hecho, eso no importa para el propósito de esto. Eso es sólo dar una nota de alto nivel en cuanto a cómo se estructura esto. El elemento SVG tiene un par de cosas que son diferentes al HTML en que se ve que tiene un ancho y una altura y un cuadro de vista, que es qué partes de la imagen son visibles están dentro de la imagen que se está mostrando. En realidad puedes tener SVG que se apagan de pantalla y en pantalla dentro del cuadro de vista. Ahí hay algo de meta información, un título, esta es nuestra sencilla cara, algunas profundidades que no estaban usando en este momento, y luego nos metemos en los elementos reales. Estos son como un HTML, sus divs o spans, sus etiquetas de párrafo, excepto aquí son elementos gráficos. Tenemos g, que es una etiqueta de grupo. Este grupo es toda nuestra cara, la cara simple. Podemos ver que hay un círculo, algunas elipses, un polígono de trayectoria algunas elipses más, algunos más caminos, algunas elipses más. Los círculos y las elipses son bastante sencillos. Este primero es nuestro rostro. Se puede ver que hay algunos valores diferentes con al respecto que podemos cambiar. Podríamos cambiar el color del trazo. Si quisiéramos cambiar la línea que es la parte exterior del círculo de negro a, digamos un gris, podemos hacer eso y podemos ver que aquí abajo cambia de negro a gris. Tenemos el ancho de trazo, que es el ancho de la línea en el exterior. Si cambiamos eso hasta cinco, por ejemplo, podemos ver que eso, se vuelve mucho más grande y más gordo. Cámbiala de nuevo a dos, y tenemos el relleno, que es lo interno a esto. Ahora estos trazo, ancho de trazo lleno, estos están disponibles para la mayoría de nuestros elementos. Se puede ver también hay algunos elementos de posicionamiento. Tenemos cx, cy, ahí es donde se posiciona esto dentro del se proyectan para el centro. Este es el centro x, el centro y dado r, que tiene un radio. Si bajamos eso a 17, podemos ver que ese círculo se hizo mucho más pequeño. Podemos ver que estos se hacen eco ampliamente para cada uno de estos diferentes tipos de elementos, elipse, círculos, etc. Caminos, verás que hay esta otra cosa funky, d es igual y luego un conjunto de lo que esencialmente se ve números y algunas letras funky adjuntas. No vamos a sumergirnos profundamente en ese formato en este momento, pero esto está describiendo una ruta arbitraria por el espacio. El modo en que creé esto y la forma en que la mayoría de la gente crea anuncios como este o crea cosas dentro de SVG que son arbitrarias es que usarán una herramienta gráfica. Usé boceto. Acabo de armar esto usando la herramienta de vector de boceto. No exporté estos caminos para mí. Ahora que están aquí, los puedo modificar y manipularlos. Pero no creo que nadie sea caminos de escritura a mano para sus vectores a menos que hayan estado haciendo esto desde hace mucho tiempo, usualmente usan una herramienta para hacerlo. Puedes escribir estos en Scatchard, Illustrator empezar algo, y luego exportarlo y conseguirás estos pads de inmediato. En nuestra siguiente lección, echaremos un vistazo a cómo podemos manipular estos de una manera más sistemática y cómo podemos empezar a usar CSS para retocar y jugar con él. Te veré ahí. 3. Manipular el trazos y rellenar con CSS: En este video, vamos a ver tomar ese mismo SVG usamos en el último video y ahora peinarlo no solo en línea con cambiar nuestro trazo o nuestro relleno en línea, sino con CSS. Esto como puedes ver, es el mismo SVG, la misma cara simple que creamos, pero he añadido un poco, he añadido nombre de clase. He añadido una clase de cara para este óvalo exterior. He etiquetado mis ojos, mi nariz, etc. Si estás siguiendo en casa, haz click a través del bolígrafo, golpea Fork, y podemos empezar a retocar con esto usando CSS. Déjame abrir la pestaña CSS aquí. Ahora, estoy usando el preprocesador Sass que me permite usar variables aquí, denominadas variables. Eso es sólo para que pueda hacer esto un poco más semánticamente. Ahora, se puede ver que he tomado estas clases y he empezado a apuntarlas y poner estas propiedades en. Esto significa dos cosas. Una, significa que puedo borrar las propiedades sobre en el SVG original. Si tomo la cara, podría decirle “No tengo ningún defecto”. Eso es bastante bueno y se quedó igual aquí pero si me deshiciera de estos, se volvería a negro, que es el predeterminado si no está definido. En realidad quiero mantener esos valores predeterminados pero lo que haré en su lugar es empezar a anularlos con CSS. Digamos, por ejemplo, tengo mi color de ojos, que ahora mismo es este azul y quiero hacer mi color de ojos negro. Voy a ir completamente a los ojos. Podemos ver que el ojo en este momento solo está usando un relleno de color de ojos. Voy a cambiar el color de los ojos aquí y sólo lo llevaré a negro. Eso anula mis incumplimientos y se puede ver con mis ojos aquí abajo, sólo volverse totalmente negro. Esto se puede hacer de varias maneras diferentes. Lo que esto abre es la capacidad de usar CSS de todas las formas que no harías HTML, para crear interacciones y todo tipo de otras cosas. Diga que mi cara es esta bonita saludable marrón en este momento, pero me asusto mucho cuando pasas sobre mí, así que voy a añadir un efecto hover simplemente agregando algo de CSS, un pseudo objetivo para el hover. Voy a cambiar mi relleno a un blanco pastoso cuando se cierren sobre mí. Hacemos eso, venimos y de repente soy un blanco pastoso en cualquier momento que flote. Esto nos permitirá hacer todo tipo de interacciones divertidas y en un video futuro, hablaremos de cómo puedes hacerlo para crear efectos interactivos en todos tus iconos. Puedes crear una barra de menús interactiva usando SVG. Hay una salvedad que tiene que ver con cómo tu SVG necesita ser incluido en la página para que CSS lo apunte, y eso vamos a abordar en el siguiente video. Te veré ahí. 4. SVG y de la DOM: En este video, vamos a hablar de diferentes formas en que puedes incluir SVG en tu página. El que probablemente más te hayas encontrado es éste. Se puede soltar un SVG como la fuente a la imagen. A pesar de ser código, los SVG también son solo imágenes y juegan muy bien con etiquetas de imagen. Otra forma de hacerlo es con la etiqueta de objeto. Esta es una forma más antigua de hacer referencia al contenido externo que solía usarse para reproductores flash y cosas por el estilo. Reconoce SVG pero esto no es generalmente recomendable. También puedes usar un SVG que haga referencia a otro. Se puede definir una imagen como un símbolo y solo un ejemplo reutilizable y luego hacer referencia a ella en SVG. En este caso estoy haciendo referencia a este símbolo que definí aquí en un SVG vacío, un SVG que no se muestra en la página en absoluto sino solo define mi símbolo. Lo puedo hacer referencia en. Puedes hacer referencia a terceras imágenes externas, cosas que no están en la misma página pero tienen que estar en tu mismo dominio. Entonces la forma final en que puedes poner un SVG en tu página es con código en línea. Este es exactamente el mismo SVG con el que hemos estado jugando todo el tiempo. Cuando usas estos diferentes mecanismos, tienes diferentes limitaciones. Dejarlos caer como fuentes a las imágenes es genial pero en realidad no se puede manipular estos SVG con CSS. De hecho, ya verás si miras aquí abajo mis caras, dos de ellas tienen algo ligeramente diferente. Tomé nuestro CSS y cambié el relleno por la nariz, así que lo cambié para que sea blanco. Pero eso solo impactó a dos de nuestras versiones. Impactó al SVG que está usando el símbolo y al SVG que está totalmente en línea. Si utiliza la fuente de imagen u objeto que hace referencia a datos, no puede tocar esos SVG con CSS. Si estás usando esto, el uso al que terminas con algo así como la sombra DOM que coloca algunas limitaciones sutiles en lo que es a lo que puedes acceder. Nos vamos a sumergir demasiado en esos porque nos vamos a centrar en esta última versión, el SVG en línea. Esta es la forma más poderosa de usar SVG. Pusiste todo tu código en. El problema con eso es, ¿qué pasa si estás recibiendo tus SVG de una fuente de terceros? conseguiste como archivos de imagen, solo quieres tratar con ellos como imágenes. Para eso, vamos a hacer algo llamado inlining. Vamos a utilizar una herramienta que saca esas imágenes y las deja caer en tu página. Cubriremos el inlining en el siguiente video. Nos vemos ahí. 5. Inlining SVG: Bienvenido de nuevo y hablemos de inyección SVG. La inyección de SVG es simplemente usando JavaScript para mirar imágenes que tienen una fuente SVG, sacar esa fuente y volcarla directamente en la página que está en línea SVG. Se podría hacer eso manualmente por supuesto, pero no sólo es que un gran dolor en el culo, sino que tampoco se llega a aprovechar el almacenamiento en caché del navegador disponible para las imágenes. No obstante, esta biblioteca que un grupo llamado Iconic release llamado SVG inyector, nos permite hacerlo automáticamente con JavaScript y aún así aprovechar el almacenamiento en caché del navegador. Lo que esto nos permite hacer es tomar todas nuestras etiquetas de imagen que hacen referencia a SVG, ir automáticamente y sacar esa fuente SVG y volcarla en su lugar. Veamos cómo se ve esto. Aquí tengo mi cara estándar que hemos estado usando hasta este punto y se hace referencia como una etiqueta de imagen pero voy a hacer algo más con ella. He agregado una clase para poder hacer referencia en JavaScript y he agregado el inyector SVG JavaScript. Ahora lo he hecho sólo haciendo referencia a CDNJS, lo que me permite meterlo en mi página. Puedes hacerlo aquí. Podrías instalarlo con un paquete NPM si estás haciendo algo localmente, sin embargo quieras hacerlo. Pero en CodePen, esto es lo más fácil. Cuando ejecuto mi página, tengo este pedacito de JavaScript que busca cualquier etiqueta de imagen que tenga una clase inyectable, pasa esas al inyector SVG y de repente esto ya no es una imagen. En realidad es un SVG en línea. Podemos ver eso inspeccionándolo. Se pone todo ese SVG justo directamente en su lugar. Es tan simple como eso. Eso nos permite empezar a aprovechar toda la magia de SVG en línea sin dejar de mantener nuestro código agradable y sencillo con imágenes simples. 6. Fontawesome y svg-with-js js: Jugar con nuestra cara ha sido muy divertido, pero pasemos a algunos usos más profesionales de los SVG. El primer lugar que vamos a empezar es con iconos. Ahora, si no estás familiarizado, Font Awesome es una increíble fuente de iconos con cientos de iconos de nivel profesional disponibles de forma gratuita y aún más disponibles si estás dispuesto a pagar un poco de licencia. En Font Awesome 5, el lanzamiento más reciente, hicieron algo que es realmente genial. Lo que hicieron es que lanzaron su mecanismo predeterminado para desplegar estos iconos es usar SVG con JavaScript inyectándolos. Simplemente incluyes un simple archivo JavaScript que maneja todo, incluyes tus iconos Font Awesome usando solo un par de clases en una ETag, y automáticamente las inyectará como SVG en línea dándonos acceso a toda la potencia que nosotros han estado hablando de SVG en línea. Es súper sencillo hacerlo. Si buscamos rápidamente, configuré un CodePen básico. Acabo de poner un par de versiones rápidas de los iconos de Font Awesome ahí. Todo lo que tengo que hacer es agregar una referencia a su JavaScript, y de repente, estos iconos están apareciendo y están apareciendo como SVG en línea con los que podremos hacer cosas divertidas. Entonces en nuestro próximo video, comenzaremos a sumergirnos en el uso real de este en para crear una barra de menús para lo que eventualmente será nuestro editor de imágenes. Pero eso es todo por ahora. Font Awesome. Si no lo has comprobado antes, échale un vistazo, estarás volado. 7. Crear una barra de menú: Ahora vamos a empezar a los primeros pasos de construir lo que será nuestro proyecto del curso. En este video, lo que vamos a hacer es empezar a buscar construir una barra de menús con la que podamos jugar. Si lo estás siguiendo, home, click fork, para bifurcar un nuevo CodePen desde el enlace. Lo que he empezado aquí es solo armar un espacio muy sencillo para que creemos aquí nuestro editor de fotos. Entonces tengo un editor contenedor div, tengo barra de menús con la que vamos a estar haciendo cosas, y he empezado a poner algunos iconos en la barra de menús. A medida que avanzamos, vamos a hacer más cosas de lujo, pero estamos usando la fuente impresionante. Si no estás familiarizado con la forma en que funciona la fuente impresionante, puedes hacer FA y luego el guión FA, cualquiera que sea el nombre de la clase. A veces hay versiones alternas, por lo que FAR si cambio lo que es este R, solo la plaza FA va a ser un cuadrado lleno. En tanto que si hago la R, es sólo esbozo. Entonces puse algo de CSS simple aquí, así que solo limité el tamaño del editor con el ancho, centrándolo, desajustándolo un poco. Ponga la barra de menús, dale un pequeño borde agradable, algunos flex de pantalla para que las cosas un diseño correctamente relleno en ella y empiece a rellenar las cosas. Ahora, una cosa a tener en cuenta es que estoy peinando SVG aquí, no itags. De hecho, si pongo itags que coincida con lo que escribí en la fuente, no funciona. Eso es porque, hemos incluido fuente impresionante aquí y está transformando automáticamente estos Itags, en SVG. Algo a tener en cuenta si estás usando la fuente impresionante de esta manera es, estos se están convirtiendo en SVG. No podemos confiar en que se queden de esa misma manera. Por lo que acabo de empezar con tres iconos diferentes estoy pensando que querrás poder descargar nuestra imagen, tomar una foto para poner algo ahí dentro, dibujar un cuadrado sobre él, tal vez queremos hacer un círculo o algo así como eso. Pongamos un círculo aquí. Podrías hacer todo tipo de cosas si solo quieres explorar cuáles están disponibles todas las diferentes opciones para ti, iconos impresionantes de fuentes. Se pasa a fuente awesome.com, haga clic en iconos. Estamos usando las versiones gratuitas, pero aún quedan casi 1000 iconos que podríamos poner ahí. Ve a la ciudad, piensa en cuáles son las diferentes cosas que podrías desear tu editor de fotos pueda hacer y simplemente empieza a jugar con el uso de esta fuente impresionante. Si estás emocionado, puedes empezar a jugar con peinar el SVG, cada uno de estos está conformado por un camino que puedes manipular que tiene un relleno y color. Empezaremos a meternos en eso un poco más en el siguiente video. Consigue un conjunto básico de barra de menús, esta será la base sobre la que construiremos en el futuro. 8. Hacer que nuestra barra de menú de: En este video, vamos a ver esa barra de menús que acabamos de armar en el último video y empezar a hacer interactivo mediante la utilización de CSS, pseudo elementos o pseudo propiedades para que podamos hacer que interactúe en base a hover o aplicar clases que luego nos permiten interactuar con él, con JavaScript y cambiar su estado. Lo que vamos a empezar es con la misma barra de menús que tenemos, excepto que he hecho una alteración. He envuelto cada uno de estos iconos con el pequeño lapso que me permite contenerlo y hacer cosas con él. Entraremos en por qué lo hago una vez que lleguemos al JavaScript. Ahora mirando el CSS, acabo de configurar un par de variables SAS para que podamos representar semánticamente el color mientras jugamos con esto. Si queremos manipular estos SVG, debemos saber un poco sobre cómo se ven. Si inspeccionamos esto con el inspector, podemos ver que cada uno de estos iconos consiste en sólo una sola ruta, que es dibujar esa forma sea cual sea el icono y tiene un valor de relleno de color actual. Ahora el color actual es una propiedad CSS especial que básicamente dice, sea cual sea el color que sea para este ítem, usa eso aquí, para que eso no se divierta a menudo los casos. Permite heredar cualquiera que sea el color del contenedor y de la escritura, y en su caso. Si solo establecemos un color en la barra de menús para que sea nuestro azul claro, ese color en realidad se heredará. Si quisiéramos hacer esto sin el enfoque de color actual, tendríamos que realmente establecer el relleno. Tendríamos que saber, vale, esta cosa tiene un camino en ella y necesitamos manipular el relleno para que sea azul claro. Eso funciona igual de bien. El truco del color actual es realmente conveniente cuando estás usando estos dentro de bloques de textos y cosas así porque simplemente recoge cualquiera que sea el color circundante. Pero eso no nos importa tanto porque lo que vamos a hacer es cambiar esto con base en el estado hover. Si nos desplazamos un poco hacia abajo, tengo una cuadra aquí para hover. Esto dice que cada vez que pase el cursor sobre el SVG, cambie el color del borde y cambie el color. Podemos ver ahora mientras rondamos, estas cosas se convirtieron en azul claro cuando las colocamos, y lo que eso hace es que se sientan interactivas. Le da al usuario una pista, oye, probablemente pueda hacer clic en esto y va a hacer algo. De hecho, pongamos en práctica eso. Si queríamos hacer algo basado en un click, lo que tenemos que hacer es usar JavaScript para ver ese click y luego aplicar algo. Ahora un estándar para esto ya que aplicas una clase, y luego tienes cualquier cambio de estilo que quieras cambiar basado en esa clase. Esa es una forma de administrar la visualización en función del estado. Ahora vamos a llegar a por qué le pongo estos envoltorios alrededor. Lo que hago con el JavaScript para que esto suceda es que voy a hacer un tiempo de espera establecido a su alrededor y eso es solo asegurarme de que, oye, ya tenemos estas cosas en la página Font Awesome ha tenido tiempo de analizarlo y usar su JavaScript . Entonces encuentro todos los elementos del documento que se llaman acción. Así se llaman estos raperos y en cualquier momento hay un click sobre ellos, voy a simplemente alternar si tiene una clase activa o no. Esa es una clase estatal que me permite buscar eso en mi CSS. Podría haber hecho esto en teoría en todos los SVG directamente en lugar de envolverlos con tramos. Pero esto llega a un rápido got que quiero resaltar para ti, que es cuando estás usando Font Awesome, es JavaScript realmente está viendo todos esos SVG. Si los manipulas, los volverá a renderizar en la página solo para asegurarse de que, si por ejemplo, cambias la clase, aún tenga el ícono correcto que puede meterse con otras cosas en nuestro JavaScript. Si quieres manipular los estados de estos sin obligarlos a volver a renderizar, probablemente necesitarás envolverlos en una clase o en un elemento como lo hice aquí. ¿Qué vamos a hacer? Cada vez que haga clic en esto, vamos a alternar si ese contenedor, esa acción tiene una clase activa. Entonces podemos usar CSS para representar visualmente eso. En cualquier momento esto esté activo, se va a poner azul oscuro. Lo mismo aplica para cada uno de estos y luego como estamos usando toggle, en realidad podemos desactivarlo. Eso nos da una indicación visual de comportamiento. Una vez que empecemos a agregar más elementos a un editor de fotos, esto no sólo agregará un elemento visual, sino que en realidad cambiará qué comportamiento hemos sucedido. Nos meteremos en eso y empezaremos a hablar de cómo integramos fotos a nuestros SVG, en nuestro próximo video. Te veré ahí. 9. Incorporar fotos en SVGs: Hemos pasado todo este tiempo hablando de SVG, que son imágenes vectoriales, imágenes que se definen como descripciones de lo que son que dicen bien, esto del punto a al punto b, o esto es un cuadrado, cosas así. Pero hay toda una tonelada de imágenes en la web, como todas esas maravillosas fotos de gatos que encontramos por todas partes que no caen en la categoría de imágenes vectoriales. Son lo que se conoce como imágenes ráster, lo que básicamente significa que son descripción de puntos de color. Esto es lo que sale de tus cámaras. Esto es cualquier cosa que sea un PNG o un JPEG o cualquiera de esos formatos de imagen son, y esos son realmente importantes. ellos hay muchas cosas importantes. No obstante, podemos incorporar los directamente dentro de los SVG y hacer cosas divertidas con ellos. Vamos a empezar a hacer eso con un montón de edición de imágenes, difuminando, haciendo todo tipo de cosas geniales en los próximos videos. Pero para empezar, sólo necesitamos saber cómo los ponemos. He agarrado una imagen de un conjunto de gatitos porque Internet es para gatos. Obtuve esto de un usuario de Flickr. Si no lo sabías, puedes ir a Flickr y pedir cualquier imagen que tenga licencias creativas comunes, o licencias donde puedas usarlo públicamente. Puedo usar esto públicamente siempre y cuando acuse crédito a nuestro usuario de Flickr, o el usuario de Flickr sea Casey XD, y así puedas encontrar imágenes para tu propio uso. Simplemente ve a Flickr y busca y luego ordena por tipo de licencia. Lo que vamos a hacer es poner eso dentro de un SVG para que podamos empezar a manipularlo en el futuro. De lo que hemos hecho, tengo lo que sería, tendríamos nuestra barra de menús aquí arriba como teníamos anteriormente, pero lo he sacado por ahora para que podamos enfocarnos justo en la imagen y ponerla dentro de un escenario y luego tengo mi SVG ahora mismo justo como un envoltura alrededor de una etiqueta de imagen. Una etiqueta de imagen es básicamente una referencia a cualquier otro tipo de imagen. Puedes incrustar tu imagen ráster en un SVG simplemente poniendo una etiqueta de imagen, poniendo el enlace a donde vive esa imagen, y especificando alguna dimensión. Aquí estamos diciendo, vamos a empezar en cero en el SVG, en cero y cero, x e y Vamos a tener que esta cosa tome hasta 500 píxeles de ancho. Nos permitió dimensionar la altura. Aquí está nuestra imagen viviendo justo dentro de nuestro SVG. Si lo inspeccionamos, está ahí dentro en el SVG. En nuestro próximo video, empezaremos a hablar, ahora que lo tenemos en nuestro SVG, ¿qué podemos hacer con él? Empezaremos a buscar filtros y desenfocar. Acompáñame ahí. 10. Tu primer filtro de SVG - Blur: Ahora llegamos a sumergirnos en la carne de lo que será nuestro proyecto, la edición real de fotos. Para ello, lo que vamos a hacer es que vamos a utilizar una herramienta llamada filtro de SVG. Ahora los filtros son esencialmente conjuntos de transformaciones de imagen que se definen y luego se pueden aplicar reutilizables en cualquier tipo de imagen. Puedes usar estos para aplicar a componentes SVG nativos, así que podrías decir, quiero tomar este componente SVG y quiero desenfocarlo, o quiero cambiar los colores, o quiero rotarlo, o cosas así, podrías hacer eso con un filtro, o puedes hacerlo a imágenes ráster como nuestra foto gatitos. Los filtros se pueden combinar. Hay todo tipo de formas en que puedes crear un filtro que tenga un conjunto de primitivas diferentes que sí pero vamos a empezar con el más básico de los filtros. Vamos a empezar con un desenfoque. En este caso vamos a usar un desenfoque gaussiano, y la forma en que esto se ve en SVG es, se define un filtro con algún ID, eso es lo que te va a dar la capacidad de aplicarlo a las cosas y luego se usa un conjunto de filtros primitivas dentro de ella. Tenemos nuestro filtro, al que sólo vamos a llamar Blur Me y contiene un solo primitivo un FegaussianBlur. gaussiano básicamente significa que vamos a distribuir las cosas lo largo de una curva y tendrás que definir cuál es la fuente para ese desenfoque. En este caso, vamos a usar una clave que es el gráfico fuente, que básicamente dice lo que sea que estés aplicando este filtro, eso es lo que quiero que desenfoques. Hay algunas otras palabras clave que podrías aplicarlo al alfa, que es solo la transparencia del gráfico, hay un par de cosas más. Para todos nuestros propósitos de edición de imágenes, creo que vamos a querer utilizar el gráfico fuente. Entonces hay una desviación estándar que se aplica a lo extendido que es ese desenfoque. Si estamos tomando el original y distribuyéndolo sobre una ola, ¿qué tan ancho es eso o qué tan estrecho es eso? Después lo aplicas a una imagen. Simplemente agregamos esta propiedad de filtro que apunta al filtro que hemos definido. Para ver, lo hemos aplicado a nuestro gato, nuestro gato está muy borroso. Si bajamos esa desviación estándar a 0, es como si no tuviéramos desenfoque en ella en absoluto. Lo cambiamos hasta 1, empieza a ponerse un poco más borroso, 2, 3, y solo sigue haciéndose más borroso y borroso. Aplicar esto a toda la imagen puede no ser tan emocionante pero a medida que bajamos y empezamos a buscar combinar esto con masa, podrás desenfocar de manera selectiva partes de tu imagen e incrementar el foco en los demás. Esta va a ser una herramienta súper poderosa en nuestro kit de herramientas y es uno de los filtros más simples para empezar. Está bien. En nuestro próximo video, vamos a hablar de otro filtro que podemos utilizar para transformar nuestras imágenes y hacerlas lucir retro o tinte ahí coloreando de diferentes maneras. Acompáñame ahí. 11. Filtro de transformación de color: Bienvenido de nuevo y a nuestro segundo video sobre filtros en SVG. En este video, vamos a ver un tipo de filtro diferente. Vamos a ver cómo manipular los colores dentro de nuestras imágenes. Se puede ver que tengo nuestra misma foto de gatito, pero se ve un poco diferente, parece una foto de la vieja escuela. Tiene un poco retro, está un poco teñida de rojo. El modo en que estamos haciendo eso es usar otra de las primitivas de filtro disponibles en SVG, esta llamada FeComponentTransfer. Lo que esto hace es, nos permite definir una función que se aplica a cada píxel dentro de la imagen y la transforma. De lo que estamos haciendo aquí, tenemos una función para el factor rojo, una función para el verde, un factor para el azul. Esto va a tomar el valor RGB de cada píxel esta imagen y transformarlo base en la fórmula que definamos. Para este filtro, este es el que realmente estoy aplicando en este momento. Yo lo llamo desplazamiento al rojo. A lo que estamos haciendo, tenemos dos factores con los que podemos jugar. Podemos jugar con la pendiente de la función. Lo que básicamente significa es, si la pendiente es una que dice esa es la intensidad de la R, la G o la B. Si es una, va a ser la misma intensidad que en la foto original. Aquí lo hemos puesto en dos, así que estamos ramando las intensidades de todos nuestros píxeles pero luego también llegamos a cambiar la intercepción. Ahí es donde comienza el valor. Interceptar cero dice dejarlo en paz. Interceptar valores negativos dice rampla hacia abajo, hazlo menos. En esto estamos diciendo, hacer el nuestro un poco más extremo, pero empezar en el mismo lugar. Haz que nuestros greens sean un poco más extremos pero empieza más bajo y el blues de rampart aún más abajo. Si quisiéramos cambiar y enfatizar un componente diferente, lo que podemos hacer es hacer lo mismo pero rampar abajo nuestros rojos y nuestro green es un poco y luego borrar el blues y cambiar. Si miramos cómo se ve eso en lugar de un desplazamiento al rojo, podemos ver que en realidad tiñe todo con un color azul. Se puede jugar con esto de varias maneras diferentes. Podemos ver cómo se vería si no cambiáramos la pendiente en absoluto, pero aun así cambiamos la intercepción y eso aún tiene ese tinte rojo pero se siente muy aburrido no está muy vivo al agregar una pendiente adicional. A pesar de que estamos quitando algunos de los colores, algunos de los verdes, algunos de los azules, todavía se siente vivo. También podemos mirar lo que pasaría si cambiáramos esto hacia adelante en lugar de negativo, así que cambiamos el rojo y realmente lo enfatizamos y eso nos da un tinte de enfoque muy rojo. Estamos agregando rojo en lugar de solo enfatizar lo que ya hay sacando a algunos de los otros. Este va a ser otro de nuestros efectos de filtro permanentes que vamos a aplicar. Hay una tonelada de diferentes efectos de filtro. En realidad puedes ir a la documentación del W3 y mirar a través de todas las diferentes primitivas del filtro. Muchos de ellos tenían que ver con la luz y cómo la luz hace las cosas. No vamos a cubrir todos estos en el curso, pero ese es un lugar divertido para que vayas a estudiar y explorar y averiguar cómo puedes extender qué tipos de efectos quieres aplicar a tus SVG. En nuestro próximo video, estaremos hablando de máscaras, lo que nos permite aplicar cosas a subsecciones de nuestras imágenes, así que únete a mí ahí. 12. Máscaras: Ahora vamos a hablar de máscaras. Las máscaras nos dan la capacidad de mostrar selectivamente piezas de nuestras imágenes y ocultar el resto. Básicamente lo que haces cuando definas una máscara es crear una forma y luego cuando aplicas eso como máscara a otra cosa, solo muestra cosas que caben dentro de esa forma. Lo que he hecho aquí en nuestros ejemplos, he tomado nuestra foto de gatito y es la misma foto exacta a pesar de que sólo estás viendo parte de ella. Lo que he hecho es que he creado una máscara rectangular. Yo lo llamé mi máscara de gatito y la di, esa máscara contiene algunas cosas dentro de ella, contiene un rectángulo y le di alguna dimensión. Empecé en, X 50, le doy un ancho de 250 y una altura de 500 y lo que eso hace es cuando lo aplico usando este atributo de máscara a mi imagen, muestra selectivamente sólo las cosas que están cubiertas por este rectángulo. Puedo cambiar lo que está mostrando cambiando el tamaño del rectángulo, así que si cambio el ancho, se vuelve un poco más ancho, veo un poco más de mis gatitos. Si cambio por donde empieza, así digamos en lugar de empezar a los 50, empecé a los 250. Ahora estoy mostrando el otro lado de esa imagen, y podría cambiar el relleno, también. Eso se pone un poco complicado. Lo que esto esencialmente hará es mostrar cualquier cosa donde la máscara sea opaca. En este momento la máscara tiene un relleno, es completamente opaca, por lo que va a mostrar todo. Si me deshiciera de ese relleno por completo, nada mostraría porque mi relleno no está ahí. Si pones algo como tu relleno que es translúcido, en realidad puedes conseguir mostrar parcialmente, así que lo consigues para mostrar de manera translúcida. Al marcar alrededor con el alfa, puedes hacer las cosas divertidas. No vamos a sumergirnos en eso con gran detalle, pero eso te da alguna sensación de lo flexibles que son las máscaras. En nuestro siguiente video, vamos a empezar a ver algunos de los usos de esto, que podamos tomar nuestra máscara, usar eso para mostrar las cosas de manera selectiva y luego combinarlo con un filtro para que podamos desdibujarnos selectivamente, selectivamente modificar el color, hacer todo tipo de cosas divertidas. Te veré ahí. 13. Manipulación de SVG: Está bien. Hablemos de la manipulación programática de los SVG. Al igual que cualquier cosa en HTML, los elementos SVG, sobre todo una vez que están en línea, se pueden manipular con JavaScript. Lo que eso significa es que todas estas herramientas de las que hemos estado aprendiendo, filtros, máscaras, etc se pueden cambiar y aplicar con JavaScript. Entonces lo que he hecho para demostrar que aquí es que he tomado a nuestro gatito, y tengo la máscara que hicimos en nuestro último video, y acabo de poner tres pequeños enlaces juntos. Sin máscara, máscara pequeña, y máscara grande y les di ID para que podamos engancharlos y agarrarlos con JavaScript. También agregué un ID a mi imagen para poder referirme a eso un poco y así lo que queremos que hagan estos, es no tener máscara, deshacerme de la máscara, máscara pequeña, poner una máscara pequeña ahí y gran masa, poner una máscara grande ahí. Para hacer eso, solo usamos algo simple, JavaScript. Lo que tengo aquí, es, agarré estos diferentes, objetos por sus identificaciones. Entonces tengo la máscara, lo que realmente vamos a querer cambiar, si estamos cambiando la máscara, es el rectángulo dentro de ella, las dimensiones de eso. Si cambiamos las dimensiones, y la mascota, elemento en sí, no va a ayudar en nada, porque, necesita ser ¿cuál es el objeto que está haciendo la máscara? Después una imagen, oops, tenemos unos puntos y comas extra ahí. Esa es la imagen que tenemos. Entonces creé, algunos oyentes de eventos. Entonces para ninguna máscara, todo lo que queremos hacer, es establecer el atributo en la imagen de la máscara, no debe estar ahí. Para masa pequeña, queremos que esté ahí y queremos configurar esa máscara para que tenga un ancho pequeño, y para máscara grande, queremos configurarla para que tenga un ancho mayor. Eso es todo. Es simplemente JavaScript de vainilla simple. Es como, manipular cualquier otra cosa. Pero porque, podemos manipular estas máscaras, y estos filtros, podemos aplicar estos efectos, una manera realmente divertida. Vamos a echar un vistazo como se ve, sin máscara, ahí está nuestra imagen original, pequeña máscara. Lo que tenemos, gran máscara, se extiende por ahí. Si quieres jugar más con esto, puedes intentar usar esto para aplicar filtros, y otras cosas que podrías estar saliendo adelante porque vamos a cubrir eso, en los próximos videos. Nos vemos pronto. 14. Combinación de máscaras con filtros: Bienvenido de nuevo. Vamos a abordar la combinación de filtros y máscaras. De lo que queremos hacer, aquí tenemos nuestra foto de gatito, y queremos destacar una de ellas. Solo escojamos a este gatito de aquí, éste de la izquierda. Vamos a desenfocar el fondo y nuestro otro gatito y dejar justo este gatito aquí. Si recuerdas, nuestra máscara resaltó justo ese gatito y son filtro de desenfoque borrosa esto. Deberíamos poder combinar estos dos para obtener exactamente el efecto que deseas. En nuestro SVG, tengo nuestra máscara definida aquí, tengo el filtro que define el filtro de desenfoque. Esas son las mismas cosas que hemos cubierto en videos anteriores. Veamos cómo podríamos aplicar esto a nuestra imagen. Se podría pensar que podríamos simplemente aplicarlos a ambos a la misma imagen. Eso tendría sentido intuitivo. Pero si lo intentamos, si decimos máscara igual a URL, máscara de gatito, y luego aplicamos también el filtro. Lo que pasa es que ambos se aplican, pero no en toda la combinación que queríamos. Nos hemos enmascarado a nuestro gatito estrella, pero luego nos difuminamos a ese mismo. Si queremos combinar los efectos de una manera diferente, donde queremos que se resalte a este gatito. Lo que necesitamos hacer es en realidad capas sobre estos efectos en lugar de combinarlos. Vamos a ponernos en capa, primero el desenfoque. Después vamos a tomar otra copia de la imagen y añadir la máscara. Si tomo esta imagen y la copio antes de hacer nada, así que cópiala. Ahora tengo dos copias de la imagen. No bajan en cascada de la forma en que lo harían HTML porque SVG, estamos posicionando absolutamente. Estamos estableciendo las mismas coordenadas x e y, por lo que en realidad estas están uno encima del otro. Ahora lo que queremos hacer es desenfocar la de atrás y enmascarar la de frente. Pongamos la máscara aquí, máscara como máscara de gatito URL. No vemos un efecto de inmediato, pero podemos saber si eliminamos el otro. A eso nos estamos enmascarando. Ahora vamos a desenfocar el de fondo. El que venga primero será el que esté debajo. Intentemos filtrar es igual a URL. Ahí lo tenemos. Se puede ver que ahora tenemos un punto culminante torno a este gatito y todo lo demás en el fondo está borroso. Se puede empezar a ver cómo mediante la creación de máscaras cuidadosas, se podrían resaltar porciones particulares de una foto. Ahora bien, esto es un poco incómodo. Estamos repitiendo exactamente la misma imagen una y otra vez. Podríamos no querer hacer eso, sobre todo si esta imagen, en lugar de ser un enlace, era una mancha que hemos subido o cosas así. En realidad podemos aprovechar otra característica SVG, de hecho, una que cubrimos antes, el hecho de que se pueden definir símbolos y utilizarlos. Si cambio a este bolígrafo de código, he definido un símbolo que es la foto que tiene ese mi enlace. Abajo abajo donde quiero hacer mis desenfocos en capas y máscaras, solo tengo que hacer referencia a esa foto que sí uso y ponerla ahí dentro. Esto nos permitirá, en nuestros próximos videos, acceder a una imagen que hemos subido en un solo spot y empezar a estratificar sobre efectos a medida que avanzamos. Me emociona meterme en las cosas del editor real y empezaremos con eso en el siguiente video, así que únete a mí ahí. 15. Aplicar filtros con programática: Ahora llegamos a meternos en las cosas divertidas de hacer nuestro editor. Vamos a configurar las cosas para aplicar un filtro al clic de uno de nuestros iconos. Lo que he hecho aquí en este Code Pen, y si te estás siguiendo en casa, solo puedes tenderte esto y ponerte en marcha y jugar con él. He juntado nuestras dos piezas en la misma pluma. Tenemos nuestra barra de menú, y tengo nuestro escenario aquí. Nuestro escenario tiene la foto. Estoy usando el enfoque de símbolos porque a medida que vamos más allá, vamos a querer hacer eso para darnos flexibilidad para tener más y más versiones a esto para conseguir ese efecto de estratificación que hicimos en el último video. Pero así que sí, tengo nuestra barra de menús, pongo y esto se acaba de tirar. Tengo aquí nuestro escenario. Para mis propósitos en el video, lo que voy a hacer es que voy a aplicar ese pequeño filtro de turno rojo a la imagen. Entonces puse ese filtro en su lugar y pensando en qué significaría Icon para eso, bueno, parece el tipo de rechead que podrías hacer en Instagram. Entonces meto un ícono de Instagram y voy a usar eso. Al mirar cómo vamos a aplicar estas cosas, si queremos hacerlo con JavaScript, tenemos que hacer es dar algún tipo de gancho para explicar qué hacer. Voy a usar una práctica de usar un atributo de datos para comunicarme con el JavaScript. Esto es algo que generalmente para un JavaScript genérico. Cuando no estás usando marcos de fantasía como Reactor, cosas así, esta es una política que te recomiendo usar clases para comunicarnos, estilizar. Utilizamos datos, atributos e identificadores para trabajar con el JavaScript para que guardes una buena separación de preocupaciones ahí. Voy a agregar un filtro de datos puntos a Redshift, que es sólo el ID de nuestro filtro Redshift aquí. Después sobre el lado de JavaScript. Para que esto funcione, voy a hacer una cosa. Lo primero que voy a hacer, este es el mismo código que teníamos para nuestro material de color estatal. Hicimos esto en un video unos pocos atrás. Pero voy a añadir una capa más a esto. Primero voy a capturar cuando altere esto, ¿está activo o no? Por lo que el toggle sin clases devolverá verdadero o falso dependiendo de si agregó la clase o la eliminó. Entonces voy a llamar a una función de toggle effect. Vamos a construir sobre esto a medida que avancemos y sigamos adelante. Pero aquí es donde va a estar la necesidad de aplicar ese efecto. Al bajar a alterar afecto, lo que voy a hacer es que voy a agarrar el elemento. Se necesitan dos parámetros, el elemento en sí y si lo estás aplicando es activo o no, ya que tenemos eso de aquí. Vamos a alterar en efecto. Voy a construir esencialmente un conjunto de cheques aquí, que podríamos entonces potencialmente llamar a funciones separadas. Pero para esto, solo vamos a hacer uno donde yo diga: Vale, ¿cuál es el atributo de datos que tenemos? ¿Es un filtro? O tal vez por el camino será una máscara o tal vez nos diga, “hey, queríamos, esto en realidad es una subida o descarga o ¿qué tienes?” Eso va a ser lo que desencadena nuestro comportamiento. Lo que vamos a hacer entonces es si es un filtro, entonces vamos a una de dos cosas. En realidad vamos a aplicar el filtro a la foto, o lo vamos a quitar como si no estuviera ahí. Es realmente tan simple como eso, ya sabes, como aprendiste en los anteriores a aplicar estos filtros, todo lo que estamos haciendo es establecer un atributo de filtro en esta foto misma. Cuando hago clic en mi Instagram, repente se aplicaron mis filtros. Si le doy clic, esto es realmente lo que nos va a dar la capacidad de aplicar estos diferentes filtros. Te animo a ir a forzar con esto y jugar con él. No te limites a parar con este filtro Redshift, sino intenta extenderlo. Agrega un par de filtros más. Si realmente te gusta el filtro de desenfoque o algo así, agrega otro icono y configura un filtro de desenfoque, haz que funcione. Entonces próximamente vamos a ver en realidad agregar máscaras pro-gramaticalmente y poder hacer arrastrar y soltar y cosas divertidas como esa. Entonces únete a mí en el siguiente video para hablar de eso. 16. Mouse eventos y coordinación de JavaScript: Está bien. Antes de sumergirnos en la creación de máscaras programáticamente, desviémonos ligeramente para ver cómo hacemos las cosas que interactúan con los eventos del mouse. Porque lo que vamos a querer hacer con una máscara interactiva es poder hacer clic y arrastrar y una parte de la imagen y crear una capa de máscara. Pero haz eso, necesitamos entender cómo funciona click y drag. Lo que he montado aquí es nuestra etapa básica, igual que tenemos en general. He añadido un pequeño puntero de círculo que podemos usar para rastrear nuestro ratón y así entendemos. Entonces lo que vamos a hacer es mirar cómo funcionan los eventos del mouse y lo que queremos hacer. Si miramos el JavaScript, hay tres eventos diferentes que son importantes si estás creando un clic y arrastrando. Ahí está el ratón hacia abajo, el ratón se mueve y el ratón hacia arriba. Esos rompen las tres piezas diferentes de lo que de otra manera podrías llamar un clic, ratón hacia abajo es cuando primero haces clic hacia abajo, el movimiento del ratón ocurre cada vez que mueves el ratón. Entonces mousemove en realidad está sucediendo si no he hecho clic en absoluto, pero estoy moviendo esto alrededor y mouseup es en cualquier momento que haga clic arriba. Si quieres hacer un manejador de arrastre, algo que sucede al hacer clic y arrastrar, necesitas implementar un oyente para abajo, activar tu oyente de movimiento solo después de que lo hagas y luego apagarlo de nuevo cuando lo hagas mouseup. Eso es lo básico de lo que tenemos aquí, estamos poniendo un oyente mousedown en el escenario. Si el oyente dispara, hacemos algo de información de la que hablaremos en un segundo, pero luego agregamos estos oyentes adicionales para que estemos viendo nuestros drags y estamos viendo nuestro mouseup. En realidad agregamos estos oyentes en todo el documento y no solo en el escenario porque de lo contrario puedes meterte en un estado extraño cuando añades esos oyentes, ponerlos en todo el documento. Para echar un vistazo a lo que está disponible para nosotros en el evento realmente bifurcemos esto realmente rápido y pongamos un depurador ahí. Voy a dejar caer un depurador en mi ratón hacia abajo. Abramos esto en modo de depuración para que sea fácil hacerlo. Cuando hago mousedown en el escenario, debería conseguir un depurador, por aquí si hago clic abajo en el lateral, simplemente no hace nada. Pero si hago clic aquí, me toca el mouse y puedo ver qué es ese evento y qué datos son. Acabemos de cerrar sesión eso en la consola. Nuestro evento tiene toda una serie de datos diferentes en él, incluyendo datos de posición. Tiene este ClientX, CLIENTY, LayerX, Layery, offset X, OffsEty, PageX, PageY. ¿ Qué son todas estas cosas y qué vamos a hacer con ellas? Todos significan cosas ligeramente diferentes. El cliente se desplaza dentro de su ventana gráfica. El desplazamiento de la página en relación a toda la página. Esos son los dos que uso mayormente no les pongo tanta atención al resto de ellos. Pero podemos usar esas dimensiones para saber dónde está el ratón y utilizar eso en este caso, mover nuestro pequeño punto rojo. En el siguiente video, crea una máscara cuando lo hagamos. Volviendo a nuestro código, lo que queremos hacer es querer capturar dónde estamos y usar eso a medida que movemos esto para actualizar nuestro puntero. Ahora, si miras el código de captura que tengo aquí, hay algo más que está pasando. No sólo estoy haciendo un PageX, sino que estoy aplicando un offset. ¿ Por qué es eso? Eso es porque quiero saber dónde dentro del SVG estoy, no sólo donde dentro de la página estoy. Si no tengo ese offset, así que vamos a deshacernos del offset muy rápido y sólo echemos un vistazo a lo que funciona con nuestro pequeño punto rojo. Si no tengo eso, mi punto en realidad no está apareciendo en ninguna parte, no es para nada obvio dónde está o debería estar. Eso se debe a que las cosas que estamos manipulando están dentro del SVG y así se compensan con relación a donde empieza el SVG. Pero son eventos, los datos son globales, se basa en la página. Lo que hacemos es capturar el offset para la etapa y luego aplicamos ese offset en cualquier momento estamos cambiando nuestra posición. Vamos a decir ¿dónde estoy en la página? Resta de eso mi compensación. Si volvemos a poner eso y se puede ver que cuando hago clic y arrastre cada vez que lo está capturando, está cambiando lo que piensa que debe ser y luego actualiza ese Cx y Cy. Eso nos va a permitir crear máscaras programáticas donde podamos hacer clic y arrastrar para seleccionar partes de nuestra imagen y poner una máscara sobre eso. Una última cosa a tener en cuenta, así que mencioné ClientX y CLIENTY, PageX y PageY. Si cambiamos rápidamente nuestra PageX y PageY a ClientX y CLIENTY, echemos un vistazo a cuál es la diferencia. Si fuera a hacer esto y correr, en realidad parece que está haciendo lo mismo. Funciona igual de bien hasta que me desplace y luego se puede ver que en realidad hay un desplazamiento relativo a donde estoy porque el clientX es relativo a esta ventana, no a toda la página. Pero nuestro desplazamiento del SVG estamos calculando relativo a la página. Solo mencioné esto porque hay momentos en los que vas a querer posicionar algo no relativo a la página, sino relativo al cliente aquí. Si estás posicionando algo que no forma parte de tu SVG, pero está por encima, cosas como esa quizá quieras entender esa distancia. Entonces así es como podemos usar los eventos del mouse para manipular algo. Agarras las dimensiones o la posición fuera del evento, y lo usas para cambiar algunos atributos en el elemento. En nuestro siguiente video, vamos a sumergirnos en usar eso para crear una máscara personalizada. Entonces únete a mí ahí. 17. Crear una máscara con Click y arrastra: Está bien. Ahora vamos a utilizar lo aprendido en nuestro último video sobre eventos del mouse para crear una máscara de clic y arrastre, que podamos enmascarar sobre cualquier parte en particular de nuestra imagen. De lo que tenemos aquí, tenemos nuestro escenario. He configurado una máscara, he configurado un filtro, he configurado la misma configuración que teníamos que mostrar combinando filtros y máscaras. Pero ahora vamos a hacer que esta máscara sea un espacio personalizado. De lo que va a terminar luciendo es, voy a dar clic en algún lugar y dibujar y esa va a ser mi máscara para poder mover mi máscara, ponerla donde quiera. El modo en que vamos a hacer esto es capturando esos mismos eventos de ratón. Pero ahora vamos a hacer algunas cosas divertidas con él. En lugar de simplemente mover un pequeño punto rojo, vamos a actualizar nuestra máscara. Para ello, queremos tener el objeto de máscara agarrado. Vamos a agarrar la máscara de gatito. En realidad estoy haciendo referencia a su primer hijo porque lo que voy a cambiar no es el objeto de máscara en sí, sino el rectángulo dentro de él. Entonces voy a agarrar esa máscara, voy a hacer lo mismo que hicimos para armar offset y escenario y cosas así para que sepamos dónde están nuestros puntos, y ahora en nuestros manejadores, necesitamos hacer un seguimiento de ambos donde empezamos, donde estaba ese click inicial, para que tengamos esa esquina inicial y donde termina el ratón. Por lo que un efectivo son a la vez un inicio y una corriente cuando en máscara hacia abajo. A medida que arrastramos, solo actualizamos las cosas y luego actualizamos la máscara a medida que vamos y luego el mouse arriba distribuye de nuevo los manejadores. Máscara de actualización. Lo que estamos haciendo es básicamente crear un nuevo rectángulo. Estamos estableciendo una nueva x, una nueva y, y una nueva anchura y una nueva altura. Para ello, necesitamos ser conocedores de las dimensiones y la forma en que funciona para que nuestra x, y siempre vaya a ser nuestra esquina superior izquierda y ancho y altura van a ser lo anchos. Si comienzas por la izquierda y vas a la derecha, el primer lugar que empieces va a ser el x, mientras que si comienzas por la derecha y vas a la izquierda, el segundo. Para ello, estamos usando este math.min para decir. ¿ De acuerdo? Cualquiera que quede más allá, usa esa o lo que esté más arriba, usa esa. Eso es todo lo que es. Eso pones en su lugar y podemos actualizar esta máscara para que veas cómo puedes, ahora con este enfoque, crear máscaras personalizadas donde quieras y estás creando cosas. Si quisieras ir un paso más allá y decir : “Oye, quiero aplicar múltiples máscaras”. Entonces quiero despejar tanto éste como aquel. Podrías tener esto crear una nueva máscara y crear una nueva capa en nuestra imagen cuando vayas. Pero dejaré eso como ejercicio para ti. Está bien. Ya casi estamos ahí. En el siguiente video, vamos a hablar de cómo conseguimos una imagen personalizada aquí arriba para que podamos hacer algo y luego haremos la descarga y luego terminaremos. Estoy emocionado, vamos. 18. Subir imagen personalizada: Entonces para que esto sea útil, necesitamos hacerlo para que realmente podamos subir una foto personalizada. No es que no amemos a nuestros gatitos, pero si queremos un editor de fotos, tenemos que dejarnos poner una foto. Lo que vamos a hacer es primero, sólo poner una entrada de archivo. Veamos cuál es el código, meto una entrada de archivo y no quiero saber la entrada de archivo por defecto, quiero algo que tenga estilo de la misma manera que nuestros botones son. Pongo el icono de subida y uso un truco para crear entradas con estilo, que es que escondo esta entrada con CSS y pongo esta imagen y pongo subir a mostrar, pero la envuelvo en una etiqueta. Al hacer clic en esto, actuará como si hiciera clic en la entrada. Si hago clic, aquí está mi entrada de archivo. A continuación, quiero usar JavaScripts para agarrar cualquier imagen que suba ahí y ponerla en mi imagen fuente aquí. Hay un par de cosas que hacen posible esto. Cuando subamos ese archivo, realmente lo conseguiremos como un objeto de archivo que o bien podemos convertir en lo que se conoce como blob, que es opaco para nosotros. No podemos hacer nada con él, pero es en la página que podemos hacer o realmente podemos renderizarlo como un objeto base 64, que es una gran cadena de bytes que se traduce al binario de esa imagen. El bonito de eso, es que entonces si descargamos eso, no es específico de esta página, podemos usarla donde queramos. Vamos a usar ese enfoque. De la forma en que lo hacemos, agarramos la entrada del archivo, agregamos un oyente de eventos en él para que en cualquier momento que cambie esa entrada, vamos a ejecutar esta función. En el interior, sólo agarramos los archivos. Esta funcionalidad aquí usando un FileReader y ReadasDataUrl, esto es lo que nos va a dejar poner esta cosa como un blob o lo siento, como una cadena binaria que luego podemos descargar. Ponemos eso, ejecutamos el archivo ahí dentro, y luego cuando se está descargando, establecemos el atributo de nuestra imagen por aquí para tener una fuente de esa imagen. Si echamos un vistazo a lo que es esto, subo esta foto y de repente eso está ahí dentro. Si miro aquí la fuente, podemos ver que es, oops, volvamos hacia abajo en la imagen, justo en línea reemplazando nuestra referencia externa y funciona igual que esperarías. Ahora podemos aplicar nuestros filtros a eso. Podemos filtrar esto de la misma manera que hicimos nuestra foto de gatito, podemos poner aquí cualquier imagen que queramos. Esto nos da la capacidad de crear un editor de fotos de propósito general donde ponemos una foto arriba. Siguiente video, vamos a ver cómo entonces tiramos eso hacia abajo para poder reutilizarlo en otro lugar. Nos vemos ahí. 19. Guardar tu SVG: Bienvenido de nuevo. Echemos un vistazo a lo último que necesitamos para hacer un increíble editor de fotos. Ya tenemos nuestro código que está configurado para subir nuevas imágenes, aplicar filtros, hacer todo tipo de cosas divertidas. Necesitamos alguna manera de bajar la imagen de nuevo después de que hayamos terminado. Vamos a implementar una función de descarga y luego tendremos todo lo que necesitamos para hacer de este impresionante editor de fotos. lo que vamos a hacer desde el punto de vista del marcado, lo único que vamos a cambiar es que vamos a añadir un ID en el icono de descarga para que podamos capturar clics y hacer algo con él. Todo lo demás aquí es lo mismo que hemos estado construyendo. Todavía tenemos el filtro Redshift. Todavía tenemos la capacidad de subir nuestras propias fotos, cosas así, pero vamos a poner algo de funcionalidad en esa descarga. Ponemos un ID, y encima en nuestro JavaScript vamos a agarrar ese botón y añadir un manejador de clics. Ese manejador de clics va a descargar el SVG. Esto muy sencillamente todo lo que necesita hacer es agarrar nuestro código SVG que hemos creado y hemos modificado usando estos botones de filtro y cosas así. Agarra el contenido de eso. Agarramos nuestro SVG, agarramos el HTML externo, que básicamente significa agarrar el símbolo SVG, todo lo demás, y luego ponemos eso en un archivo. En este caso, lo vamos a hacer, crear un enlace que tenga esa información como atributo de datos. Esta es una forma de crear un archivo sobre la marcha. Establece el atributo a descargar, que tu navegador lo descargue y luego haga clic. Eso es todo lo que va a pasar. Cuando haga clic en esto, se va a descargar una imagen. Hay una salvedad, algo que poner ahí. Nos estábamos poniendo un poco descuidados en nuestros SVG. Acabamos de tener el SVG view box version info. Para que esto se renderice correctamente en un navegador después de descargarlo, necesitamos vincularlo a xlink y SVG para que si esto básicamente le diga al navegador, si mira esta caída por sí solo, trate esto como una imagen. También teníamos identificación para que lo podamos agarrar aquí arriba. Pero lo que nos deja hacer ahora es decir que subo una foto personalizada, voy a subir mi águila. Ahí está mi águila. Aplico filtro Redshift, luciendo super retro. Ahora cuando lo descargo, obtengo un archivo que ha guardado todos mis cambios para que pueda usarlos donde quiera. Con esto, tienes todo lo necesario para construir un editor de archivos impresionante y tu reto, tu proyecto de curso es ir y llevar esto y llevarlo más allá. Hemos mirado filtros, miramos masa, construimos tu editor para combinarlos. Mira algunas de las otras cosas de SVG que hay por ahí para ti, algunos de los otros filtros disponibles, algunos de los otros utillajes, tal vez puedas hacer algo de redimensionamiento, hacer algunas otras cosas divertidas. mí me emociona ver lo que se te ocurre, y tenemos un video más donde hablamos un poco de las posibilidades de donde puedes llevar esto, pero has recorrido un largo camino y ahora estás listo para completar tus proyectos de curso. Tengo muchas ganas de verlos. 20. Paso final: A medida que terminamos este curso, quiero dejarte con un sentido de las posibilidades que te abren con SVG. Hemos mirado un poco lo que es posible. Hemos mirado la estructura del código SVG. Hemos aprendido a manipularlo con CSS y empezamos a jugar con algunas de las tecnologías avanzadas de filtrado disponibles dentro de él. SVG. No obstante, este es un lenguaje completo que dice rico de un lenguaje para crear imágenes ya que HTML es para crear documentos. Hay mucho más de lo que podemos cubrir en este curso. Está muy abierto para ti apenas alguien está aprovechando el poder que le otorga SVG. Pero si miras a tu alrededor y puedes ver a la gente creando imágenes animadas interactivas increíblemente intrincadas, puedes ver que la gente sostiene juegos creando SVG con marcos JavaScript avanzados como React. Las posibilidades son infinitas y está abierta para ti. No tomemos este curso como producto terminado, sino como algo que te inspire a cavar más. Simplemente ve a Code Pen y comienza a buscar ejemplos de animación SVG, mira a tu alrededor los juegos SVG. Hay tantas posibilidades. Si quieres aprender más sobre mí y lo que hago y otras cosas sobre las que enseño. Puedes encontrarme en mi página web, ZenDev.com z-e-n-d-e-v.com. Espero ver más de ustedes en el futuro. Está bien, esto es el inicio de sesión por cable.