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 ;)
