Ionic 2 — Como fazer a função Story do Instagram — Parte 2: Desenhando na foto

Pra quem está entrando direto nesse post, iniciei na semana passada uma série de posts para refazer o Story do Instagram, caso queria ver clique aqui.

Hoje vamos para a segunda parte onde vamos:

1 — Apresentar a foto que tiramos

2 — Desenhar em cima da foto

Então agora nossa tela de story-photo terá 3 “modes”:

  • camera — quando a câmera está pronta para tirar foto
  • picture — quando a foto foi tirada
  • brush— quando você está desenhando em cima da foto

Para cada mode teremos um conjunto de botões diferentes que serão apresentados na tela faremos isso com *ngIf.

O mode picture terá os botões:

1 — Save: para salvar a imagem na galeria

2 — Cancel: para sair

3 — Botão de seta para adicionar ao feed

4 — Botão de pincel para desenhar (vai para mode pincel)


O mode brush terá:

1 — Undo: para voltar

2 — Done: para quando modificar

3 — Slide de cores para modificar a cor do pincel


Antes de adicionarmos os componentes na tela, vamos adicionar o componente que fará o desenho, chamado de Canvas Draw. Adaptei ele do post Creating a Drawing Application in Ionic para suportar uma imagem de fundo.

Vamos lá:

Crie uma pasta e adicione os arquivos abaixo canvasdraw.ts e canvas-draw.html:

Agora adicionar o componente no app.module.ts

declarations: [
MyApp,
HomePage,
StoryPhotoPage,
CanvasDraw
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
StoryPhotoPage,
CanvasDraw
],

Agora está tudo certo para adicionarmos modificarmos o html do story-photo.html completo com cada mode.

Agora precisamos ajustar o código do story-photo.ts para suportar os novos modes.

Adicione também no story-photo.scss o estilo para o slide ficar fixo embaixo:

.slide-class {
position: absolute;
bottom: 10px;
height: auto;
right: 10px;
}

Agora é só testar ;)

Deixe um comentário falando o que você achou :)

Parte 3 — Salvando a foto e fazendo a tela principal