SVGs como código: ícones interativos e manipulação fácil de imagens

1. Mergulhe: Olá, Cabo aqui e bem-vindo a este curso sobre SVGs como Código. Com a ascensão da web responsiva, SVGs tornaram-se muito populares. Por uma boa razão, elas são imagens vetoriais, que significa que isso fica perfeitamente para cima ou para baixo com o tamanho da tela. No entanto, há uma razão ainda mais importante para as SVGs serem tão poderosas. SVGs são código assim como HTML. Isso significa que podemos manipulá-los com as mesmas ferramentas com CSS e JavaScript. Neste curso, vamos mergulhar no que isso significa. Vamos dar uma olhada nas SVGs. O que é esse código? O que é que parece? Vamos começar a brincar com a forma como aplicamos CSS para torná-los um pouco interativos, mudar de cor com base em pairar ou aplicar uma classe CSS. Então vamos mergulhar em alguns dos recursos mais avançados dos SVGs, como podemos usar filtros para colocar imagens e depois mudar sua coloração, adicionar desfoque, mascarar peças que não queremos, tudo divertido. Vamos usar JavaScript para tornar isso interativo para que no final do curso, você construa um editor de fotos exatamente como você pode encontrar no Instagram ou Snapchat, onde você pode colocar uma foto, aplicá-la filtros personalizados, e, em seguida, baixe essa imagem para usar onde quiser. Espero que estejas tão entusiasmado como eu. Junte-se a mim no próximo vídeo. 2. SVG como código: Vamos mergulhar no que compõe um SVG. Para tornar isso fácil, eu criei um pouco simples SVG. Acabei de montar este rostinho usando o Sketch. Você pode ver que eu não sou muito de um artista, mas isso usa um monte de elementos diferentes dentro do SVG que nos permitirá explorar o que essas coisas são e como elas estão disponíveis para nós. Se você está seguindo junto em casa, clique através da caneta, basta clicar em Fork, você pode mexer com ele sozinho, e você pode ver o que temos imediatamente é um olhar para. Aqui está nossa imagem, e aqui está o código que está gerando essa imagem. Vamos mergulhar no que são essas peças. Você pode ver que ele é estruturado de forma bastante semelhante ao HTML. Você tem um elemento externo que, em vez de dizer HTML é SVG, podemos ignorar esta versão XML. Na verdade, isso não importa para o propósito disso. Isso é apenas dar uma nota de alto nível sobre como isso é estruturado. O elemento SVG tem algumas coisas que são diferentes do HTML em que você vê que ele tem uma largura e uma altura e uma caixa de exibição, que é quais partes da imagem são visíveis estão dentro da imagem que está sendo mostrada. Você pode realmente ter SVGs que saem da tela e na tela dentro da caixa de exibição. Há alguma meta informação, um título, este é o nosso rosto simples, algumas profundidades que não estavam usando agora, e então entramos nos elementos reais. Estes são como um HTML, seus divs ou spans, suas tags de parágrafo, exceto aqui eles são elementos gráficos. Temos g, que é uma tag de grupo. Este grupo é todo o nosso rosto, o rosto simples. Podemos ver que há um círculo, algumas elipses, um polígono de caminho, mais elipses, mais alguns caminhos, mais algumas elipses. Círculos e elipses são bastante simples. Este primeiro é o nosso rosto. Você pode ver que há alguns valores diferentes com isso que podemos mudar. Podemos mudar a cor do traço. Se quiséssemos mudar a linha que é a parte externa do círculo de preto para, digamos um cinza, podemos fazer isso e podemos ver que ela muda aqui de preto para cinza. Temos a largura do traçado, que é a largura da linha do lado de fora. Se mudarmos isso para cinco, por exemplo, podemos ver que fica muito maior e mais gordo. Mude de volta para dois, e nós temos o preenchimento, que é o que é interno para isso. Agora estes traçados, largura do traçado preenchido, estes estão disponíveis para a maioria dos nossos elementos. Você pode ver que há também alguns elementos de posicionamento. Temos cx, cy, que é onde isso está posicionado dentro do são rastreados para o centro. Este é o centro x, o centro y dado r, que tem um raio. Se baixarmos para 17, podemos ver que o círculo ficou muito menor. Podemos ver que estes são amplamente ecoados para cada um desses diferentes tipos de elementos, elipse, círculos, etc Caminhos, você verá que há esta outra coisa funky, d é igual e, em seguida, um conjunto do que essencialmente se parece números e algumas letras funky anexadas. Não vamos mergulhar profundamente nesse formato agora, mas isso é descrever uma rota arbitrária através do espaço. A maneira como eu criei isso e a maneira como a maioria das pessoas cria anúncios como este ou cria coisas no SVG que são arbitrárias é que eles usarão uma ferramenta gráfica. Eu usei o esboço. Acabei de montar isso usando a ferramenta vetorial de esboço. Não exportou estes caminhos para mim. Agora que eles estão aqui, posso ajustá-los e manipulá-los. Mas eu não acho que ninguém está escrevendo caminhos para seus vetores a menos que eles estão fazendo isso por muito tempo, eles geralmente usam uma ferramenta para fazê-lo. Você pode escrever isso em Scatchard, Illustrator começar algo, e depois exportá-lo e você vai obter esses pads imediatamente. Em nossa próxima lição, vamos dar uma olhada em como podemos manipulá-los forma mais sistemática e como podemos começar a usar CSS para mexer e brincar com ele. Te vejo lá. 3. Manipulação e preenchimento com CSS: Neste vídeo, vamos olhar para pegar o mesmo SVG que usamos no último vídeo e agora modelá-lo não apenas em linha com a mudança de nosso traçado ou nosso preenchimento inline, mas com CSS. Isto como você pode ver, é o mesmo SVG, o mesmo rosto simples que criamos, mas eu adicionei um pouco, Eu adicionei o nome da classe. Eu adicionei uma classe de rosto para este oval exterior. Eu rotulei meus olhos, meu nariz, etc Se você está seguindo junto em casa, clique através da caneta, aperte Fork, e podemos começar a mexer com isso usando CSS. Deixe-me abrir a guia CSS aqui. Agora, estou usando o pré-processador Sass que me permite usar variáveis aqui, denominadas variáveis. Isso é só para que eu possa fazer isso um pouco mais semanticamente. Agora, você pode ver que eu fiz essas aulas e comecei a direcioná-las e colocar essas propriedades em. Isso significa duas coisas. Um, significa que posso apagar as propriedades no SVG original. Se eu pegar o rosto, eu poderia dizer: “Não tem nenhum padrão.” Isso é muito bom e ficou o mesmo aqui, mas se eu fosse me livrar deles, ele se tornaria preto, que é o padrão se não estiver definido. Eu realmente quero manter esses padrões em, mas o que eu vou fazer em vez disso é começar a substituí-los com CSS. Digamos que, por exemplo, eu tenho a cor dos meus olhos, que agora é este azul e eu quero fazer o meu olho cor preta. Vou ficar completamente com os olhos. Podemos ver que o olho agora está usando um preenchimento de cor dos olhos. Vou mudar a cor dos olhos aqui e levar para preto. Isso substitui meus padrões e você pode ver com meus olhos aqui embaixo, apenas ficar totalmente preto. Você pode fazer isso de várias maneiras diferentes. O que isso abre é a capacidade de usar CSS de todas as maneiras que você não faria HTML, para criar interações e todos os tipos de outras coisas. Digamos que meu rosto é um marrom bonito e saudável agora, mas eu fico muito assustado quando você passa o mouse sobre mim, então eu vou adicionar um efeito de pairar simplesmente adicionando alguns CSS, um pseudo alvo para pairar. Vou mudar o meu preenchimento para um branco pastoso quando você pairar sobre mim. Fazemos isso, chegamos e de repente sou um branco pastoso sempre que pairo. Isso nos permitirá fazer todo tipo de interações divertidas e, em um vídeo futuro, falaremos sobre como você pode fazer isso para criar efeitos interativos em todos os seus ícones. Você pode criar uma barra de menus interativa usando SVGs. Há uma advertência que tem a ver com como seu SVG precisa ser incluído na página para CSS direcioná-lo, e vamos abordar isso no próximo vídeo. Te vejo lá. 4. Nosso uso e o DOMs sombras: Neste vídeo, vamos falar sobre diferentes maneiras incluir SVGs em sua página. O que você provavelmente mais encontrou é este. Você pode soltar um SVG como a origem da imagem. Apesar de ser código, SVGs também são apenas imagens e eles jogam bem com tags de imagem. Outra maneira que você pode fazer isso é com a tag object. Esta é uma maneira mais antiga de referenciar conteúdo externo usado para flash players e coisas assim. Ele reconhece SVGs, mas isso geralmente não é recomendado. Você também pode usar um SVG que faça referência a outro. Você pode definir uma imagem como um símbolo e apenas um exemplo reutilizável e, em seguida, referenciá-la no SVG. Neste caso, eu estou fazendo referência a este símbolo que eu defini aqui em um SVG vazio, um SVG que não aparece na página em tudo, mas apenas define o meu símbolo. Posso fazer referência a isso. Você pode fazer referência a imagens externas de terceiros, coisas que não estão na mesma página, mas eles têm que estar no mesmo domínio. Em seguida, a maneira final que você pode colocar um SVG em sua página é com código embutido. Este é exatamente o mesmo SVG com que estivemos jogando o tempo todo. Quando você usa esses mecanismos diferentes, você tem limitações diferentes. Soltá-los como fontes para imagens é ótimo mas você não pode manipular esses SVGs com CSS. Na verdade, você vai ver se você olhar aqui em baixo para meus rostos, dois deles têm algo um pouco diferente. Eu peguei nosso CSS e mudei o preenchimento para o nariz, então eu mudei para ser branco. Mas isso só afetou duas de nossas versões. Ele impactou o SVG que está usando o símbolo e o SVG que é totalmente inline. Se você usar fonte de imagem ou dados de referência de objeto, não será possível tocar nesses SVGs com CSS. Se você estiver usando isso, o uso que você acaba com algo como o DOM sombra que coloca algumas limitações sutis sobre o que é que você é capaz de acessar. Vamos mergulhar muito nisso porque vamos nos concentrar nesta última versão, o SVG inline. Esta é a maneira mais poderosa de usar SVGs. Você colocou todo o seu código. O problema com isso é, o que acontece se você estiver recebendo seus SVGs de uma fonte terceirizada? Você os tem como arquivos de imagem, você quer apenas lidar com eles como imagens. Para isso, vamos fazer algo chamado inlining. Vamos usar uma ferramenta que puxa essas imagens e as solta em sua página. Vamos cobrir o inlining no próximo vídeo. Vejo você lá. 5. Como entrar em contato: Bem-vindo de volta e vamos falar sobre injeção de SVG. A injeção de SVG é simplesmente usando JavaScript para olhar para imagens que têm uma fonte SVG, puxar essa fonte para fora e despejá-lo diretamente na página que é SVG inline. Você poderia fazer isso manualmente, é claro, mas não só isso é um grande pé no saco, mas você também não pode tirar proveito do cache do navegador disponível para imagens. No entanto, esta biblioteca que um grupo chamado Iconic release chamado SVG injector, nos permite fazê-lo automaticamente com JavaScript e ainda aproveitar o cache do navegador. O que isso nos permite fazer é pegar todas as nossas tags de imagem que fazem referência a SVGs, ir automaticamente e puxar essa fonte SVG para fora e despejá-la no lugar. Vamos ver como isso se parece. Aqui eu tenho meu rosto padrão que temos usado até este ponto e é referenciado como uma tag de imagem, mas eu vou fazer algo mais com ele. Eu adicionei uma classe para que eu possa referenciá-la em JavaScript e adicionei o JavaScript injetor SVG. Agora eu fiz isso apenas referindo CDNJS, que me permite puxá-lo para a minha página. Você pode fazer isso aqui. Você pode instalá-lo com um pacote NPM se você estiver fazendo algo localmente, como você quiser fazê-lo. Mas na CodePen, isso é o mais fácil. Quando eu corro minha página, eu tenho esse pouco de JavaScript que procura qualquer tag de imagem que tem uma classe de injeção, passa aqueles para o injetor SVG e de repente isso não é mais uma imagem. Na verdade, é um SVG em linha. Podemos ver isso inspecionando-o. Colocou todo aquele SVG direto no lugar. É tão simples assim. Isso nos permite começar a aproveitar toda a magia dos SVGs em linha, mantendo nosso código agradável e simples com imagens simples. 6. Fontawesome 5 e svg-with-js: Brincar com nosso rosto tem sido muito divertido, mas vamos passar para alguns usos mais profissionais de SVGs. O primeiro lugar que vamos começar é com ícones. Agora, se você não está familiarizado, Font Awesome é uma fonte de ícones incrível com centenas de ícones de nível profissional disponíveis gratuitamente e ainda mais disponíveis se você estiver disposto a pagar por um pouco de uma licença. Em Font Awesome 5, a versão mais recente, eles fizeram algo muito legal. O que eles fizeram é que eles lançaram seu mecanismo padrão para implantar esses ícones é usar SVGs com JavaScript injetando-os. Você apenas inclui um arquivo JavaScript simples que gerencia tudo, você inclui seus ícones Font Awesome usando apenas algumas classes em um ETag, e ele irá injetá-los automaticamente como SVGs inline dando-nos acesso a todo o poder que nós Estive falando de SVGs em linha. É super simples fazer isso. Se olharmos rapidamente, criei uma CodePen básica. Acabei de colocar algumas versões rápidas de ícones Font Awesome lá. Tudo o que eu tenho que fazer é adicionar uma referência ao seu JavaScript, e de repente, esses ícones estão aparecendo e eles estão aparecendo como SVGs em linha que poderemos fazer coisas divertidas. Então, em nosso próximo vídeo, vamos começar a mergulhar no uso real disso em para criar uma barra de menu para o que eventualmente será nosso editor de imagens. Mas é isso por enquanto. Fonte Incrível. Se você não tiver verificado antes, confira, você ficará impressionado. 7. Como criar uma barra de menu: Agora vamos começar os primeiros passos da construção do que será o nosso projeto de curso. Neste vídeo, o que vamos fazer é começar a olhar para construir uma barra de menu para nós brincarmos. Se você estiver seguindo sobre ele, home, clique no fork, para bifurcar uma nova CodePen a partir do link. O que eu comecei aqui é apenas montar um espaço muito simples para criarmos nosso editor de fotos aqui. Então eu tenho uma div contêiner editor, eu tenho barra de menu que nós vamos estar fazendo as coisas com, e eu comecei a colocar alguns ícones na barra de menu. À medida que avançamos, vamos fazer coisas mais extravagantes, mas estamos usando fontes incríveis. Se você não está familiarizado com a forma como fonte impressionante funciona, você pode fazer FA e, em seguida, o traço FA, qualquer que seja o nome da classe. Há algumas vezes versões alternativas, tão FAR se eu mudar o que este R é, apenas FA quadrado vai ser um quadrado preenchido. Enquanto que se eu fizer o R, é apenas um esboço. Então eu coloquei alguns CSS simples aqui, então eu apenas limitando o tamanho do editor com a largura, centralizando-o, desajustando-o um pouco. Coloque a barra de menu, dar-lhe uma pequena borda agradável, alguns flexão de exibição para que as coisas um layout corretamente preenchendo sobre ele e começar as coisas de preenchimento. Agora, uma coisa a notar é que estou estilizando SVGs aqui, não itags. Na verdade, se eu colocar itags que correspondem ao que escrevi na fonte, não funciona. Isso é porque, nós incluímos fonte incrível aqui e ele está automaticamente transformando esses Itags, no SVG. Algo a ter em mente se você estiver usando fonte incrível desta forma é, estes estão ficando transformados em SVGs. Não podemos confiar que eles permaneçam dessa mesma maneira. Então eu comecei com três ícones diferentes que eu estou pensando que você vai querer ser capaz de baixar nossa imagem, tirar uma foto para colocar algo lá dentro, desenhar um quadrado sobre ele, talvez nós queremos fazer um círculo ou algo como Isso. Vamos colocar um círculo aqui. Você pode fazer todos os tipos de coisas se você quiser apenas explorar o que todas as diferentes opções estão disponíveis para você, fonte ícones impressionantes. Você vai até a fonte awesome.com, clique nos ícones. Estamos usando as versões gratuitas, mas ainda há quase 1000 ícones que podemos colocar lá. Vá para a cidade, pense sobre quais são as diferentes coisas que você pode querer seu editor de fotos seja capaz de fazer e apenas comece a brincar usando essa fonte incrível. Se você está animado, você pode começar a brincar com o estilo do SVG, cada um deles é composto de um caminho que você pode manipular que tem um preenchimento e cor. Começaremos a falar disso um pouco mais no próximo vídeo. Obtenha um conjunto básico de barras de menu, esta será a base sobre a qual construímos no futuro. 8. Fazendo nossa barra de menu: Neste vídeo, vamos olhar para a barra de menu que acabamos de montar no último vídeo e começar a fazer interativo utilizando CSS, pseudo elementos ou pseudo propriedades para que possamos fazê-lo interagir com base em pairar ou aplicar classes que então nos permitem interagir com ele, com JavaScript e mudar seu estado. O que vamos começar é com a mesma barra de menu que temos, exceto que fiz uma alteração. Eu envolvi cada um desses ícones com o pequeno espaço que me permite contê-lo e fazer coisas com ele. Vamos entender por que eu faço isso assim que chegarmos ao JavaScript. Agora olhando para o CSS, eu acabei de configurar um par de variáveis SAS para nós para que possamos representar semanticamente a cor enquanto brincamos com isso. Se quisermos manipular esses SVGs, devemos saber um pouco sobre como eles se parecem. Se inspecionarmos isso com o inspetor, podemos ver que cada um desses ícones consiste em apenas um único caminho, que é desenhar essa forma qualquer que seja o ícone e tem um valor de preenchimento da cor atual. Agora a cor atual é uma propriedade CSS especial que basicamente diz, qualquer que seja a cor para este item, use isso aqui, de modo que isso não se diverte com frequência. Ele permite que ele herde qualquer cor do recipiente e da escrita, e no caso dele. Se nós apenas definir uma cor para barra de menu para ser o nosso azul claro, essa cor realmente é herdada. Se quiséssemos fazer isso sem a abordagem de cor atual, teríamos que definir o preenchimento. Teríamos que saber, ok, essa coisa tem um caminho nele e precisamos manipular o preenchimento para ficar azul claro. Isso funciona muito bem. O truque de cor atual é realmente conveniente quando você está usando estes dentro de blocos de textos e coisas assim porque ele apenas pega qualquer que seja a cor circundante é. Mas nós não nos importamos tanto com isso porque o que nós vamos fazer é mudar isso com base no estado flutuante. Se descermos um pouco, tenho um bloco aqui para pairar. Isso diz que sempre que você passar o mouse sobre o SVG, altere a cor da borda e altere a cor. Podemos ver agora enquanto pairamos, essas coisas se transformaram em azul claro quando as pairamos, e o que isso faz é que elas se sintam interativas. Ele dá ao usuário uma dica, hey, Eu provavelmente posso clicar sobre isso e ele vai fazer alguma coisa. Vamos realmente implementar isso. Se quiséssemos fazer algo baseado em um clique, o que precisamos fazer é usar JavaScript para observar esse clique e, em seguida, aplicar alguma coisa. Agora, um padrão para isso como você aplica uma classe, e então você tem qualquer mudança de estilo que você quer mudar com base nessa classe. Essa é uma maneira que você pode gerenciar a exibição com base no estado. Agora vamos entender por que eu coloquei esses invólucros em torno dele. O que eu faço com o JavaScript para fazer isso acontecer é que eu vou fazer um tempo limite definido em torno dele e isso é apenas certificando-se de que, hey, nós já temos essas coisas na página Font Awesome teve tempo para analisá-lo e usar seu JavaScript . Então eu encontrar todos os elementos do documento que são nomeados ação. Isso é o que esses rappers são chamados e sempre que houver um clique neles, eu vou apenas alternar se ele tem uma classe ativa ou não. Essa é uma classe estadual que me permite procurar isso no meu CSS. Eu poderia, em teoria, ter feito isso em todos os SVGs diretamente em vez de envolvê-los com vãos. Mas isso vem para um rápido tem que eu quero destacar para você, que é quando você está usando Font Awesome, é JavaScript está realmente assistindo todos esses SVG. Se você os manipular, ele irá rerenderizá-los na página apenas para ter certeza de que, se por exemplo, você mudar a classe, ela ainda tem o ícone certo que pode mexer com outras coisas em nosso JavaScript. Se você quiser manipular os estados destes sem forçá-los a re-renderizar, você provavelmente precisará envolvê-los em uma classe ou em um elemento como eu fiz aqui. O que vamos fazer? Toda vez que eu clicar sobre isso, vamos alternar se esse contêiner, essa ação tem uma classe ativa. Em seguida, podemos usar CSS para representar visualmente isso. Sempre que isso estiver ativo, vai ficar azul escuro. O mesmo se aplica a cada um destes e, em seguida, uma vez que estamos usando alternância, podemos realmente desativá-lo. Isso nos dá uma indicação visual de comportamento. Uma vez que começamos a adicionar mais elementos a um editor de fotos, isso não só irá adicionar um elemento visual, mas vai realmente mudar o comportamento que temos acontecido. Vamos entrar nisso e começar a falar sobre como integramos fotos em nossos SVGs, em nosso próximo vídeo. Te vejo lá. 9. Como incorporar fotos em SVGs: Passamos todo esse tempo falando sobre SVGs, que são imagens vetoriais, imagens que são definidas como descrições do que eles são que dizem ok, isto do ponto a ao ponto b, ou este é um quadrado, coisas assim. Mas há uma tonelada de imagens na web, como todas aquelas maravilhosas fotos de gatos que encontramos em todos os lugares que não se encaixam na categoria de imagens vetoriais. Eles são o que é conhecido como imagens raster, o que basicamente significa que eles são descrição de pontos de cor. Isto é o que sai das suas câmaras. Isto é qualquer coisa que é um PNG ou um JPEG ou qualquer um desses formatos de imagem são, e esses são realmente importantes. Há muitas coisas importantes neles. No entanto, podemos incorporar aqueles diretamente dentro de SVGs e fazer coisas divertidas com eles. Vamos começar a fazer isso com um monte de edição de imagens, borrando, fazendo todo tipo de coisas legais nos próximos vídeos. Mas, para começar, só precisamos saber como colocá-los. Eu peguei uma imagem de um conjunto de gatinhos porque a internet é para gatos. Recebi isso de um usuário do Flickr. Se você não sabia, acesse o Flickr e solicite imagens que tenham licenças criativas comuns ou licenças nas quais você possa usá-las publicamente. Eu posso usar isso publicamente, desde que eu credite nosso usuário Flickr, ou usuário do Flickr é Casey XD, e você pode encontrar imagens para seu próprio uso dessa maneira. Basta ir para o Flickr e pesquisar e, em seguida, classificar por tipo licenciado. O que vamos fazer é colocar isso dentro de um SVG para que possamos começar a manipulá-lo no futuro. O que fizemos, eu tenho o que seria, teríamos nossa barra de menu aqui em cima como tínhamos anteriormente, mas eu tirei isso por agora para que possamos focar apenas na imagem e colocá-lo dentro de um palco e então eu tenho meu SVG agora apenas como um envoltório em torno de uma tag de imagem. Uma tag de imagem é basicamente uma referência a qualquer outro tipo de imagem. Você pode incorporar sua imagem raster em um SVG simplesmente colocando uma tag de imagem, colocando o link para onde essa imagem e especificando alguma dimensão. Aqui estamos dizendo, vamos começar em zero no SVG, em zero e zero, x e y. vamos ter essa coisa ocupar 500 pixels de largura. Permitiu-nos dimensionar a altura. Aqui está a nossa imagem vivendo dentro do nosso SVG. Se o inspecionarmos, está lá no SVG. Em nosso próximo vídeo, vamos começar a falar sobre, agora que temos em nosso SVG, o que podemos fazer com ele? Vamos começar a olhar para filtros e borrar. Junte-se a mim lá. 10. Seu primeiro filtro de SVG - Blur: Agora podemos mergulhar na carne do que será o nosso projeto, a edição real de fotos. Para fazer isso, o que vamos fazer é usar uma ferramenta chamada filtro de SVG. Agora os filtros são essencialmente conjuntos de transformações de imagem que são definidos e, em seguida, podem ser aplicados reutilizáveis em qualquer tipo de imagem. Você pode usá-los para aplicar a componentes SVG nativos, então você pode dizer, eu quero pegar este componente SVG e eu quero desfocá-lo, ou eu quero mudar as cores, ou eu quero girá-lo, ou coisas assim, você pode fazer isso com um filtro, ou você pode fazê-lo para raster imagens como nossa foto gatinhos. Os filtros podem ser combinados. Há todos os tipos de maneiras que você pode criar um filtro que tem um conjunto de diferentes primitivos que ele faz, mas nós vamos começar com o mais básico dos filtros. Vamos começar com um borrão. Neste caso, vamos usar um desfoque gaussiano, e a maneira como isso parece no SVG é, você define um filtro com algum ID, que é o que vai lhe dar a capacidade de aplicá-lo a coisas e em seguida, você usa um conjunto de filtros primitivos dentro dele. Nós temos nosso filtro, que nós vamos chamar de Borrão Me e ele contém uma única primitiva um FegaussianBlur. Gaussian basicamente significa que vamos distribuir as coisas ao longo de uma curva e você precisará definir qual é a fonte para esse borrão. Neste caso, vamos usar uma chave que é o gráfico de origem, que basicamente diz o que você está aplicando este filtro, é isso que eu quero que você borre. Há algumas outras palavras-chave que você poderia aplicá-lo ao alfa, que é apenas a transparência do gráfico, há algumas outras coisas. Para todos os nossos propósitos de edição de imagens, acho que vamos querer usar o gráfico de origem. Então há um desvio padrão que se aplica ao quão espalhado é esse borrão. Se estamos pegando o original e distribuindo-o por uma onda, quão grande é isso ou quão estreito é isso? Em seguida, você aplicá-lo a uma imagem. Basta adicionar esta propriedade de filtro que aponta para o filtro que definimos. Para ver, nós aplicamos ao nosso gato, nosso gato está muito embaçado. Se colocarmos esse desvio padrão para 0, é como se não tivéssemos nenhum borrão nele. Nós mudamos para 1, ele começa a ficar um pouco mais embaçado, 2, 3, e ele continua ficando mais embaçado e desfocado. Aplicar isso a toda a imagem pode não ser tão emocionante, mas à medida que descermos e começarmos a olhar para combinar isso com massa, você será capaz de borrar seletivamente partes da sua imagem e aumentar o foco nos outros. Esta será uma ferramenta super poderosa em nosso kit de ferramentas e é um dos filtros mais simples para começar. Tudo bem. Em nosso próximo vídeo, vamos falar sobre outro filtro que podemos usar para transformar nossas imagens e torná-las retrô ou coloridas de maneiras diferentes. Junte-se a mim lá. 11. Filtro de transformação de de cores: Bem-vindo de volta e para o nosso segundo vídeo sobre filtros no SVG. Neste vídeo, vamos olhar para um tipo diferente de filtro. Vamos olhar para manipular as cores dentro de nossas imagens. Você pode ver que eu tenho nossa mesma foto de gatinho, mas parece um pouco diferente, parece uma foto antiga. Tem um pouco retrô, um pouco tingido de vermelho. A maneira como estamos fazendo isso é usando outra das primitivas de filtro disponíveis no SVG, esta chamada FeComponentTransfer. O que isso faz é, ele nos permite definir uma função que aplicada a cada pixel dentro da imagem e transformá-la. O que estamos fazendo aqui, temos uma função para o fator vermelho, uma função para o verde, um fator para o azul. Isso vai pegar o valor RGB de cada pixel nesta imagem e transformá-lo com base na fórmula que definimos. Para este filtro, este é o que estou aplicando agora. Eu chamo isso de redshift. O que estamos fazendo, temos dois fatores com os quais podemos brincar. Podemos jogar com a inclinação da função. O que isso basicamente significa é que, se a inclinação é aquela que diz que é a intensidade do R, do G ou do B. Se for um, será a mesma intensidade da foto original. Aqui nós colocamos em dois, então estamos aumentando as intensidades de todos os nossos pixels, mas então nós também podemos mudar a interceptação. É aí que o valor começa. Interceptar o zero diz para deixar isso em paz. Interceptar valores negativos diz ramp para baixo, torná-lo menos. Neste estamos dizendo, faça o nosso um pouco mais extremo, mas comece no mesmo lugar. Torne os nossos verdes um pouco mais extremos, mas comece mais baixo e desvaneça os azuis ainda mais. Se quiséssemos mudar e enfatizar um componente diferente, o que podemos fazer é fazer a mesma coisa, mas descer nossos vermelhos e nosso verde é um pouco e, em seguida, apagar o blues e mudar. Se olharmos para o que parece em vez de um redshift, podemos ver que realmente matiza tudo com uma cor azul. Você pode jogar com isso de várias maneiras diferentes. Podemos olhar para o que seria se não mudássemos a inclinação, mas ainda mudássemos a interceptação e que ainda tem aquela tonalidade vermelha, mas parece muito maçante, não é muito vivo adicionando uma inclinação adicional. Mesmo quando estamos tirando algumas das cores, alguns dos verdes, alguns do azul, ainda parece vivo. Nós também podemos olhar para o que aconteceria se nós mudássemos isso para frente em vez de negativo, então nós mudamos o vermelho e realmente enfatizá-lo e isso nos dá um tom de foco muito vermelho. Estamos adicionando vermelho em vez de apenas enfatizar o que já está lá, eliminando alguns dos outros. Este vai ser mais um dos nossos efeitos de filtro permanentes que vamos aplicar. Há uma tonelada de efeitos de filtro diferentes. Você pode realmente ir para a documentação do W3 e olhar através de todas as diferentes primitivas de filtro. Muitos deles tinham a ver com a luz e como a luz faz as coisas. Nós não vamos cobrir tudo isso no curso, mas esse é um lugar divertido para você estudar e explorar e descobrir como você pode estender os tipos de efeitos que você deseja aplicar aos seus SVGs. Em nosso próximo vídeo, falaremos sobre máscaras, que nos permite aplicar coisas a subseções de nossas imagens, então junte-se a mim. 12. Máscaras: Agora vamos falar sobre máscaras. As máscaras nos dão a capacidade de mostrar seletivamente partes de nossas imagens e ocultar o resto. Basicamente, o que você faz quando você define uma máscara é criar uma forma e, em seguida, quando você aplica isso como uma máscara a outra coisa, ele só mostra coisas que se encaixam dentro dessa forma. O que eu fiz aqui em nossos exemplos, eu tirei nossa foto de gatinho e é a mesma foto exata, mesmo que você esteja vendo apenas parte dela. O que eu fiz foi criar uma máscara retangular. Eu chamei de minha máscara de gatinho e eu dei, aquela máscara contém algumas coisas dentro dela, contém um retângulo e eu dei alguma dimensão. Eu comecei em, X 50, dar-lhe uma largura de 250 e uma altura de 500 e o que isso faz é quando eu aplicá-lo usando este atributo máscara para a minha imagem, ele mostra seletivamente apenas as coisas que são cobertas por este retângulo. Eu posso mudar o que está mostrando mudando o tamanho do retângulo, então se eu mudar a largura, ele fica um pouco mais largo, eu vejo um pouco mais de meus gatinhos. Se eu mudar onde ele começa, então digamos em vez de começar em 50, eu comecei em 250. Eu estou mostrando o outro lado da imagem agora, e eu poderia mudar o preenchimento, também. Isso fica um pouco complicado. O que isso essencialmente fará é mostrar qualquer coisa onde a máscara é opaca. Agora a máscara tem um preenchimento, é completamente opaca, então vai mostrar tudo. Se eu me livrasse desse preenchimento completamente, nada apareceria porque o meu preenchimento não está lá. Se você colocar algo como seu preenchimento que é translúcido, você realmente pode obter parcialmente mostrar, então você obtê-lo para mostrar translúcido. Marcando com o alfa, você pode fazer as coisas divertidas. Não vamos mergulhar nisso em grande detalhe, mas isso dá a vocês uma noção de como as máscaras são flexíveis. Em nosso próximo vídeo, vamos começar a ver alguns dos usos disso, para que possamos pegar nossa máscara, possamos pegar nossa máscara, usá-la para mostrar seletivamente as coisas e, em seguida combinar isso com um filtro para que possamos borrar seletivamente, seletivamente modificar a cor, fazer todos os tipos de coisas divertidas. Te vejo lá. 13. Manipulação programática do SVG: Ok. Vamos falar sobre manipulação programática de SVGs. Assim como qualquer coisa em HTML, elementos SVG, especialmente quando eles estão em linha, podem ser manipulados com JavaScript. O que isso significa é que todas essas ferramentas que temos aprendido sobre, filtros, máscaras, etc, podem ser alteradas e aplicadas com JavaScript. Então o que eu fiz para demonstrar que aqui é que eu peguei nosso gatinho, e eu tenho a máscara que fizemos em nosso último vídeo, e eu apenas coloquei três pequenos links juntos. Sem máscara, máscara pequena e máscara grande e eu dei IDs para que pudéssemos conectá-los e pegá-los com JavaScript. Eu também adicionei um ID à minha imagem para que eu possa referenciar isso um pouco e então o que nós queremos fazer isso, é não ter máscara, se livrar da máscara, pequena máscara, colocar uma pequena máscara lá e grande massa, colocar uma máscara grande lá. Para fazer isso, nós apenas usamos alguns simples, JavaScript. O que eu tenho aqui, é, eu peguei esses objetos diferentes, pelas identidades deles. Então eu tenho a máscara, a coisa que nós realmente vamos querer mudar, se estamos mudando a máscara, é o retângulo dentro dela, as dimensões disso. Se mudarmos as dimensões, e o mascote, elemento em si, não vai ajudar em nada, porque, ele precisa ser qual é o objeto que está fazendo a máscara? Então uma imagem, oops, temos alguns pontos e vírgula extras lá. Essa é a imagem que temos. Então eu criei, alguns ouvintes de eventos. Então, para nenhuma máscara, tudo o que queremos fazer, é definir o atributo na imagem da máscara, não deve estar lá. Para massa pequena, queremos que ela esteja lá e queremos definir essa máscara para ter uma largura pequena, e para máscara grande, queremos configurá-la para ter uma largura maior. É isso. É apenas JavaScript de baunilha. É como, manipular qualquer outra coisa. Mas porque, nós podemos manipular essas máscaras, e esses filtros, nós podemos aplicar esses efeitos, de uma maneira muito divertida. Vamos dar uma olhada no que parece, sem máscara, há nossa imagem original, pequena máscara. O que temos, máscara grande, espalha-se por aí. Se você quiser jogar com isso mais, você pode tentar usar isso para aplicar filtros, e outras coisas que você pode estar chegando à frente, porque nós vamos cobrir isso, nos próximos vídeos. Vejo-te em breve. 14. Combinando máscaras com filtros: Bem-vinda de volta. Vamos lidar com a combinação de filtros e máscaras. O que queremos fazer, temos nossa foto de gatinho aqui, e queremos destacar uma delas. Vamos escolher este gatinho aqui, este à esquerda. Vamos desfocar o fundo e nosso outro gatinho e deixar esse gatinho aqui. Se você se lembra, nossa máscara destacou apenas que gatinho e são borrão filtro desfocado este. Devemos ser capazes de combinar estes dois para obter exatamente o efeito que você quer. Em nosso SVG, eu tenho nossa máscara definida aqui, eu tenho o filtro que filtro de desfoque definido. Essas são as mesmas coisas que cobrimos em vídeos anteriores. Vamos ver como podemos aplicar isso à nossa imagem. Você pode pensar que podemos aplicar os dois na mesma imagem. Isso faria sentido intuitivo. Mas se tentarmos isso, se dissermos máscara é igual a URL, máscara de gatinho, e então aplicamos também o filtro. O que acontece é que ambos são aplicados, mas não na combinação que queríamos. Nós nos mascaramos até nosso gatinho estrela, mas então nós embaçamos o mesmo. Se queremos combinar os efeitos de uma forma diferente, onde queremos que este gatinho seja destacado. O que precisamos fazer é, na verdade, criar camadas sobre esses efeitos em vez de combiná-los. Vamos colocar a camada, primeiro o borrão. Então vamos pegar outra cópia da imagem e adicionar a máscara. Se eu pegar esta imagem e copiá-la antes de fazer qualquer coisa, então copie-a. Agora tenho duas cópias da imagem. Eles não cascata para baixo da maneira que eles iriam HTML porque SVG, nós estamos posicionando absolutamente. Estamos definindo as mesmas coordenadas x e y, então estas estão realmente em cima uma da outra. Agora o que queremos fazer é borrar a parte de trás e mascarar a da frente. Vamos colocar a máscara aqui, mascarar como máscara de gatinho URL. Não vemos um efeito imediatamente, mas podemos saber se apagamos o outro. É para isso que estamos nos mascarando. Agora vamos borrar o plano de fundo. O que vier primeiro será o que está por baixo. Vamos tentar filtrar é igual a URL. Lá temos ele. Você pode ver que agora temos um destaque em torno deste gatinho e tudo o resto no fundo está desfocado. Você pode começar a ver como, criando máscaras cuidadosas, você pode destacar partes específicas de uma foto. Agora, isso é um pouco estranho. Estamos repetindo exatamente a mesma imagem uma e outra vez. Talvez não queiramos fazer isso, especialmente se essa imagem, em vez de ser um link, fosse um blob que carregamos ou coisas assim. Podemos realmente tirar proveito de outra característica SVG, de fato, uma que cobrimos anteriormente, o fato de que você pode definir símbolos e usá-los. Se eu trocar por essa caneta de código, defini um símbolo que é a foto que tem o meu link. Lá embaixo, onde eu quero fazer minhas máscaras e borrões em camadas, eu só tenho que fazer referência à foto que eu uso e colocar isso lá dentro. Isso nos permitirá, em nossos próximos vídeos, acessar uma imagem que carregamos em um único local e começar a colocar em camadas os efeitos à medida que avançamos. Estou entusiasmado para entrar na cena do editor e vamos começar com isso no próximo vídeo, então junte-se a mim lá. 15. Como aplicar filtros programaticamente: Agora temos que entrar nas coisas divertidas de fazer o nosso editor. Vamos configurar as coisas para aplicar um filtro no clique de um de nossos ícones. O que eu fiz aqui nesta Caneta de Código, e se você está seguindo em casa, você pode simplesmente pegar isso e ir e brincar com ele. Coloquei nossas duas peças juntas na mesma caneta. Temos a nossa barra de menus, e eu tenho o nosso palco aqui. Nosso palco tem a foto. Estou usando a abordagem de símbolos porque à medida que vamos mais longe, vamos querer fazer isso para nos dar flexibilidade para ter mais e mais versões para isso para obter o efeito de camadas que fizemos no último vídeo. Mas então sim, eu tenho nossa barra de menu, colocá-lo e isso é apenas puxado para dentro Tenho aqui o nosso palco. Para os meus propósitos no vídeo, o que eu vou fazer é aplicar aquele pequeno filtro de deslocamento vermelho na imagem. Então eu coloquei esse filtro no lugar e pensando sobre o que Icon significaria isso, bem, parece que o tipo de coisa de recheamento que você pode fazer no Instagram. Então eu coloquei um ícone do Instagram e eu vou usar isso. Olhando para como vamos aplicar essas coisas, se quisermos fazer isso com JavaScript, precisamos fazer é dar algum tipo de gancho para explicar o que fazer. Vou usar uma prática de usar um atributo de dados para comunicar com o JavaScript. Isto é algo que geralmente para um JavaScript genérico. Quando você não está usando estruturas extravagantes como Reactor, coisas assim, esta é uma política que eu recomendo usar classes para se comunicar, estilizar. Usamos dados, atributos e IDs para trabalhar com o JavaScript para que você mantenha uma boa separação de preocupações lá. Vou adicionar pontos de filtro de dados ao Redshift, que é apenas o ID do nosso filtro Redshift aqui. Em seguida, sobre o lado JavaScript. Para que isto funcione, vou fazer uma coisa. A primeira coisa que vou fazer, é o mesmo código que tínhamos para as nossas cores do estado. Fizemos isso em um vídeo alguns atrás. Mas vou adicionar mais uma camada a isto. Primeiro eu vou capturar quando eu alternar isso, ele está ativo ou não? Assim, a alternância sem classe retornará true ou false dependendo se ele adicionou a classe ou a removeu. Então eu vou chamar uma função de efeito de alternância. Vamos construir sobre isso à medida que avançarmos e continuarmos. Mas é aqui que vai ser a necessidade de aplicar esse efeito. Descendo para alternar o efeito, o que eu vou fazer é pegar o elemento. É preciso dois parâmetros, o próprio elemento e se você está aplicando ele é ativo ou não, já que temos isso a partir daqui. Vamos alternar em vigor. Vou construir essencialmente um conjunto de verificações aqui, que poderíamos chamar em funções separadas. Mas para isso, vamos apenas fazer um em que eu diga, Ok, qual é o atributo de dados que temos? É um filtro? Ou talvez na estrada seja uma máscara ou talvez nos diga : “Ei, nós queríamos, isso é realmente um upload ou download ou o que você tem?” Isso vai ser o que desencadeia o nosso comportamento. O que vamos fazer então é se for um filtro, então vamos para uma de duas coisas. Na verdade, vamos aplicar o filtro à foto, ou vamos removê-lo como se não estivesse lá. É realmente tão simples como isso, você sabe, como você aprendeu em outros anteriores para aplicar esses filtros, tudo o que estamos fazendo é definir um atributo de filtro nesta própria foto. Quando eu clico no meu Instagram, de repente meus filtros se aplicaram. Se eu clicar nele fora, isso é realmente o que vai nos dar a capacidade de aplicar esses filtros diferentes. Eu encorajo-te a ir e fortalecer-te com isto e a brincar com ele. Não pare apenas com este filtro do Redshift, mas tente estendê-lo. Adicione mais alguns filtros. Se você realmente gosta do filtro de desfoque ou algo assim, adicione outro ícone e configure um filtro de desfoque, faça com que ele funcione. Em seguida, em breve vamos olhar para realmente adicionar máscaras pró-gramaticalmente e ser capaz de fazer arrastar e soltar e coisas divertidas como essa. Junte-se a mim no próximo vídeo para falar sobre isso. 16. Eventos e coordenadores do mouse no JavaScript: Ok. Antes de mergulharmos completamente na criação de máscaras programaticamente, vamos desviar um pouco para ver como fazemos coisas que interagem com eventos de mouse. Porque o que queremos fazer com uma máscara interativa é poder clicar e arrastar e uma parte da imagem e criar uma camada de máscara. Mas faça isso, precisamos entender como funciona o clique e o arraste. O que eu montei aqui é nosso estágio básico, assim como nós temos geralmente. Eu adicionei um pequeno ponteiro de círculo que podemos usar para rastrear nosso mouse e assim nós entendemos. Então o que vamos fazer é olhar como os eventos de mouse funcionam e o que queremos fazer. Se olharmos para o JavaScript, há três eventos diferentes que são importantes se você estiver criando um clique e arraste. Há o mouse para baixo, o mouse mover e o mouse para cima. Aqueles quebrar as três partes diferentes do que você poderia chamar de um clique, mouse para baixo é quando você clica pela primeira vez para baixo, movimento do mouse acontece sempre que você mover o mouse. Então mousemove está realmente acontecendo se eu não cliquei em tudo, mas eu estou movendo isso ao redor e mouseup é sempre que você clicar para cima. Se você quiser fazer um manipulador de arrastar, algo que acontece quando você clica e arrasta, você precisa implementar um ouvinte para baixo, ativar o ouvinte mover somente depois que você fizer baixo e, em seguida, desativá-lo novamente quando você fizer Mouseup. Esse é o básico do que temos aqui, estamos colocando um ouvinte de rato no palco. Se o ouvinte for acionado, fazemos algumas informações sobre as quais falaremos em um segundo, mas então adicionamos esses ouvintes adicionais para que estejamos observando nossos arrastos e observando nosso mouseup. Nós realmente adicionamos esses ouvintes em todo o documento e não apenas no palco porque caso contrário você pode entrar em um estado estranho quando você adicionar esses ouvintes, colocá-los em todo o documento. Para dar uma olhada no que está disponível para nós no evento vamos realmente fork este real rápido e colocar um depurador lá. Eu vou apenas soltar um depurador no meu no mouse para baixo. Vamos abrir isso em um modo de depuração para que seja fácil fazê-lo. Quando eu faço o mouse no palco, eu deveria obter um depurador, aqui se eu clicar para baixo do lado, apenas não faz nada. Mas se eu clicar aqui, eu fico com o mouse e posso ver o que é esse evento e quais dados são. Vamos apenas desconectar isso no console. Nosso evento tem uma grande quantidade de dados diferentes sobre ele, incluindo dados de posição. Tem este ClientX, ClientY, LayerX, LayerY, offset X, Offsety, PageX, PageY. O que são todas essas coisas e o que vamos fazer com elas? Todos significam coisas ligeiramente diferentes. O cliente é deslocado dentro da janela de exibição. A página é deslocada em relação à página inteira. Esses são os dois que eu uso principalmente eu não presto muita atenção ao resto deles. Mas podemos usar essas dimensões para saber onde o mouse está e utilizar isso, neste caso, mover nosso pequeno ponto vermelho. No próximo vídeo, crie uma máscara quando o fizermos. Voltando ao nosso código, o que queremos fazer é capturar onde estamos e usar isso à medida que movemos isso para atualizar nosso ponteiro. Agora, se você olhar para o código de captura que eu tenho aqui, há algo mais que está acontecendo. Não estou apenas fazendo um PageX, mas estou aplicando um offset. Por que é isso? Isso é porque eu quero saber onde dentro do SVG eu estou, não apenas onde dentro da página eu estou. Se eu não tiver esse deslocamento, então vamos nos livrar do deslocamento bem rápido e dar uma olhada no que funciona com nosso pequeno ponto vermelho. Se eu não tenho isso, meu ponto não está aparecendo em nenhum lugar, não é de todo óbvio onde ele está ou deveria estar. Isso é porque as coisas que estamos manipulando estão dentro do SVG e então eles são deslocados em relação a onde o SVG começa. Mas são eventos, os dados são globais, são baseados na página. O que fazemos é capturar o deslocamento para o palco e, em seguida, aplicamos esse deslocamento sempre que estamos mudando nossa posição. Vamos dizer onde estou na página? Subtrair isso meu deslocamento. Se colocarmos isso de volta e você pode ver que quando eu clicar e arrastar cada vez que ele está capturando, ele está mudando o que ele acha que deve ser e, em seguida, atualiza esse Cx e Cy. Isso nos permitirá criar máscaras programáticas onde podemos clicar e arrastar para selecionar partes de nossa imagem e colocar uma máscara sobre isso. Uma última coisa a notar, então eu mencionei ClientX e ClientY, PageX e PageY. Se mudarmos rapidamente nosso PageX e PageY para ClientX e ClientY, vamos dar uma olhada em qual é a diferença. Se eu fosse fazer isso e fugir, parece que está fazendo a mesma coisa. Ele funciona tão bem até eu rolar e então você pode ver que há realmente um deslocamento em relação a onde eu estou porque o ClientX é relativo a esta janela, não a página inteira. Mas nosso deslocamento do SVG estamos calculando em relação à página. Eu só mencionei isso porque há momentos em que você vai querer posicionar algo não relativo à página, mas relativo ao cliente aqui. Se você está posicionando algo que não faz parte do seu SVG, mas é exagerado, coisas assim você pode querer entender essa distância. Então é assim que podemos usar eventos de mouse para manipular algo. Você pega as dimensões ou a posição fora do evento e usá-lo para alterar alguns atributos no item. Em nosso próximo vídeo, vamos mergulhar em usar isso para criar uma máscara personalizada. Então, junte-se a mim lá. 17. Como criar uma máscara com clique e arrasto: Está bem. Agora vamos usar o que aprendemos em nosso último vídeo sobre eventos do mouse para criar uma máscara de clique e arrastar, que possamos mascarar qualquer parte específica da nossa imagem. O que temos aqui, temos o nosso palco. Eu configurei uma máscara, configurei um filtro, configurei a mesma configuração que tínhamos para mostrar combinando filtros e máscaras. Mas agora vamos tornar esta máscara capaz de ser um espaço personalizado. O que vai acabar parecendo é, eu vou clicar em algum lugar e desenhar e essa será a minha máscara para que eu possa mover minha máscara, colocá-la onde eu quiser. A maneira como vamos fazer isso é capturando os mesmos eventos do mouse. Mas agora vamos fazer coisas divertidas com ele. Em vez de movermos um ponto vermelho, vamos atualizar nossa máscara. Para fazer isso, queremos que o objeto de máscara seja capturado. Vamos pegar a máscara de gatinho. Estou referenciando seu primeiro filho porque a coisa que eu vou mudar não é o objeto de máscara em si, mas o retângulo dentro dele. Então eu vou pegar essa máscara, eu vou fazer as mesmas coisas que fizemos para configurar offset e palco e coisas assim para que saibamos onde nossos pontos estão, e agora em nossos manipuladores, precisamos manter o controle de ambos onde começamos, onde o clique inicial foi, modo que tenhamos aquele canto inicial e onde o mouse acaba. Então, um dinheiro é um começo e uma corrente quando na máscara para baixo. À medida que arrastamos, apenas atualizamos as coisas e, em seguida, atualizamos a máscara à medida que vamos e, em seguida, o mouse para cima distribui os manipuladores novamente. Atualizando máscara. O que estamos fazendo é basicamente criar um novo retângulo. Estamos definindo um novo x, um novo y, e uma nova largura e uma nova altura. Para fazer isso, precisamos estar cientes das dimensões e da maneira como ele funciona para que nosso x, y sempre será nosso canto superior esquerdo e largura e altura eles vão ser quão largos. Se você começar pela esquerda e ir para a direita, o primeiro lugar que você começa será o x, enquanto que se você começar pela direita e ir para a esquerda, o segundo. Para fazer isso, estamos usando este math.min para dizer. Está bem? Seja qual for a esquerda, use esse ou o que for mais para o topo, use esse. Isso é tudo o que é. Você coloca isso no lugar e nós podemos atualizar essa máscara para que você possa ver como você pode, agora com essa abordagem, criar máscaras personalizadas onde quiser e você está criando coisas. Se você quisesse ir um passo adiante e dizer, “Ei, eu quero aplicar várias máscaras.” Então eu quero limpar este e aquele. Você pode fazer isso criar uma nova máscara e criar uma nova camada em nossa imagem quando você for. Mas vou deixar isso como um exercício para você. Tudo bem. Estamos quase lá. No próximo vídeo, vamos falar sobre como obter uma imagem personalizada aqui para que possamos fazer algo e então faremos o download e então terminaremos. Estou animada, vamos. 18. Faça o upload de imagem personalizada: Então, a fim de tornar isso útil, precisamos torná-lo para que possamos realmente fazer upload de uma foto personalizada. que não amemos nossos gatinhos, mas se queremos um editor de fotos, temos que nos deixar colocar uma foto. O que vamos fazer é primeiro, colocar uma entrada de arquivo. Vamos olhar para o que é o código, eu coloco uma entrada de arquivo e eu não quero saber a entrada de arquivo padrão, eu quero algo que é estilizado da mesma forma que nossos botões são. Eu coloco o ícone de upload e uso um truque para criar entradas estilizadas, que é que eu escondo essa entrada com CSS e coloco essa imagem e coloco upload para exibir, mas eu envolvo em um rótulo. Clicando sobre isso, vai agir como se ele clicou na entrada. Se eu clicar, aqui está a entrada do meu arquivo. Em seguida, eu quero usar JavaScripts para pegar qualquer imagem que eu carrego lá e colocá-lo em minha imagem fonte aqui. Há algumas coisas que tornam isso possível. Quando obtemos esse arquivo para cima, vamos realmente obtê-lo como um objeto de arquivo que podemos converter para o que é conhecido como um blob, que é opaco para nós. Não podemos fazer nada com ele, mas está na página que podemos fazer ou podemos realmente renderizá-lo como um objeto base 64, que é uma grande cadeia de bytes que é traduzido para o binário dessa imagem. A coisa boa sobre isso, é que se baixarmos isso, não é específico para esta página, podemos usá-lo onde quisermos. Vamos usar essa abordagem. Da maneira que fazemos isso, pegamos a entrada do arquivo, adicionamos um ouvinte de eventos nele para que a entrada mude, vamos executar essa função. Lá dentro, pegamos os arquivos. Esta funcionalidade aqui usando um FileReader e ReadAsDataURL, isso é o que vai nos deixar colocar essa coisa como um blob ou desculpe, como uma string binária que podemos então baixar. Colocamos isso, executamos o arquivo lá, e quando ele está baixando, definimos o atributo de nossa imagem aqui para ter uma fonte dessa imagem. Se dermos uma olhada no que é isso, eu carrego essa foto e de repente ela está lá dentro. Se eu olhar para a fonte aqui, podemos ver que é, oops, vamos voltar para a imagem, bem na linha substituindo nossa referência externa e funciona exatamente como você esperaria. Agora podemos aplicar nossos filtros a isso. Podemos filtrar isso da mesma maneira que fizemos nossa foto de gatinho, podemos colocar qualquer imagem que quisermos aqui. Isso nos dá a capacidade de criar um editor de fotos de propósito geral onde colocamos uma foto. Próximo vídeo, vamos ver como puxamos isso para baixo para que possamos reutilizá-lo em outro lugar. Vejo você lá. 19. Como salvar seu SVG: Bem-vinda de volta. Vejamos a última coisa que precisamos para fazer um editor de fotos incrível. Já temos nosso código configurado para fazer upload de novas imagens, aplicar filtros, fazer todo tipo de coisas divertidas. Precisamos de algum jeito de puxar a imagem de novo depois de terminarmos. Vamos implementar uma função de download e então teremos tudo o que precisamos para fazer este incrível editor de fotos. O que vamos fazer do ponto de vista da marcação, a única coisa que vamos mudar é adicionar um ID no ícone de download para que possamos capturar cliques e fazer algo com ele. Tudo o resto aqui é o mesmo que temos vindo a construir. Ainda temos o filtro Redshift. Ainda temos a capacidade de carregar nossas próprias fotos, coisas assim, mas vamos colocar algumas funcionalidades nesse download. Colocamos um ID, e mais em nosso JavaScript vamos pegar esse botão e adicionar um manipulador de cliques. Esse manipulador de cliques vai baixar o SVG. Isso muito simplesmente tudo o que ele precisa fazer é pegar nosso código SVG que criamos e modificamos usando esses botões de filtro e coisas assim. Pegue o conteúdo disso. Pegamos nosso SVG, pegamos o HTML externo, que basicamente significa pegar o símbolo SVG, tudo o resto, e depois colocar isso em um arquivo. Nesse caso, vamos fazer isso, criar um link que tenha essa informação como um atributo de dados. Esta é uma maneira de criar um arquivo imediatamente. Defina o atributo a ser baixado, para que seu navegador o baixe e clique em. É tudo o que vai acontecer. Quando eu clicar nisso, ele vai baixar uma imagem. Há uma advertência, algo para colocar lá. Estávamos ficando um pouco desleixados em nossas SVGs. Acabamos de ter as informações da versão da caixa de visualização SVG. Para que isso seja renderizado corretamente em um navegador depois de baixá-lo, precisamos vinculá-lo ao xlink e ao SVG para que, se isso basicamente diz ao navegador, se ele olhar para esta queda por conta própria, trate isso como uma imagem. Também tínhamos identificação para que pudéssemos pegá-la aqui. Mas o que isso nos permite fazer agora é dizer que eu carrego uma foto personalizada, eu vou carregar minha águia. Aí está a minha águia. Eu aplico filtro Redshift, olhando super retro. Agora, quando eu baixá-lo, eu recebo um arquivo que salvou todas as minhas alterações para que possa usá-las onde eu quiser. Com isso, você tem tudo o que precisa para construir um editor de arquivos incrível e seu desafio, seu projeto de curso é ir e levar isso mais longe. Analisamos filtros, olhamos para massa, construímos seu editor para combiná-los. Veja algumas das outras coisas SVG que estão lá fora para você, alguns dos outros filtros disponíveis, algumas das outras ferramentas, talvez você possa fazer algum redimensionamento, fazer algumas outras coisas divertidas. Estou animado para ver o que você vem acima com, e temos mais um vídeo onde falamos um pouco sobre as possibilidades de onde você pode fazer isso, mas você percorreu um longo caminho e agora você está pronto para completar seus projetos de curso. Estou ansioso para vê-los. 20. Passo final: À medida que terminamos este curso, quero deixar vocês com uma noção das possibilidades abertas para vocês com SVGs. Nós olhamos um pouco para o que é possível. Nós olhamos para a estrutura do código SVG. Aprendemos como manipulá-lo com CSS e começamos a brincar com algumas das tecnologias avançadas de filtragem disponíveis nele. SVG. No entanto, esta é uma linguagem inteira que diz rica de uma linguagem para criar imagens como HTML é para criar documentos. Há muito mais do que podemos cobrir neste curso. É aberto para você quase ninguém está se aproveitando do poder oferecido pelo SVG. Mas se você olhar em volta e você pode ver pessoas criando imagens animadas interativas incrivelmente complexas, você pode ver as pessoas segurando jogos criando SVGs com estruturas JavaScript avançadas como React. As possibilidades são infinitas e está aberto para você. Não vamos tomar este curso como um produto acabado, mas sim como algo que inspira você a cavar mais. Basta ir para Code Pen e começar a procurar por exemplos de animação SVG, olhar em volta para jogos SVG. Há tantas possibilidades. Se quiser saber mais sobre mim e o que faço e outras coisas sobre as quais ensino. Você pode me encontrar no meu site, Zendev.com z-e-n-d-e-v.com. Espero ver mais de você no futuro. Tudo bem, isso é saída de cabo.