[IONIC 3] – Zoom em Imagem
Olá pessoal, tudo bem?
A dica de hoje é bem simples e útil, vamos aprender facilmente a dar zoom em imagens com Ionic, ok?
Bora lá?
1. Criar o projeto Ionic
Vamos começar gerando um novo aplicativo Ionic em branco, para fazer isso, apenas execute o seguinte comando:
1 |
ionic start imageZoom blank |
Uma vez criado, vamos entrar no diretório do Projeto, executando:
1 |
cd imageZoom |
2. Instalando componente img-viewer
Bom, para facilitar nossa vida com o zoom em imagem, existem diversos componentes praticamente prontos que podemos utilizar, nesse caso mostrarei o img-viewer. Executaremos o seguinte:
1 |
npm install --save ionic-img-viewer |
Feito a instalação, vamos importar o componente no nosso projeto, no arquivo src/app/app.module.ts:
1 2 3 4 5 6 7 8 9 10 11 |
import { IonicImageViewerModule } from 'ionic-img-viewer'; { .... } imports: [ BrowserModule, IonicModule.forRoot(MyApp), IonicImageViewerModule ], |
3. Demonstrando a imagem
Agora, já estamos aptos a utilizar o img-viewer, então vamos alterar o arquivo src/pages/home/home.html:
1 2 3 4 5 6 7 8 9 10 11 |
<ion-header> <ion-navbar> <ion-title> Img Zoom </ion-title> </ion-navbar> </ion-header> <ion-content padding> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSir0JxM2aPWU6TckxnV3IgmSBigs_53ErKSFf0iobarapLMMW1" #myImage (click)="presentImage(myImage)" /> </ion-content> |
Como o intuito aqui é simplesmente demonstrar zoom em imagem, colocamos um simples componente img, a propriedade src fica a seu critério, e definimos um id para ela, denominado #myImage.
No evento click iremos passar uma função que vai chamar o img-viewer e a mágica acontecerá: (click)=”presentImage(myImage)”
Agora, iremos construir a função presentImage, passando como parâmetro a nossa imagem, então no arquivo src/pages/home/home.ts, deixaremos assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { ImageViewerController } from 'ionic-img-viewer'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { _imageViewerCtrl: ImageViewerController; constructor(public navCtrl: NavController, imageViewerCtrl: ImageViewerController) { this._imageViewerCtrl = imageViewerCtrl; } presentImage(myImage) { const imageViewer = this._imageViewerCtrl.create(myImage); imageViewer.present(); } } |
Importamos o componente img-viewer, criamos uma variável com nome de _imageViewerCtrl onde iremos instanciar o ImageViewerController.
E por fim, criamos a função presentImage(myImage) que recebe a nossa imagem definida no src/pages/home/home.html, chamamos a instância criada, e apresentamos com o imageViewer.present().
Após executar nosso projeto, com o comando
1 |
ionic serve -l |
ou
1 |
ionic cordova run android |
ou
1 |
ionic cordova run ios |
deveremos ter algo semelhante à isso:
Algumas características de execução:
- Toque na imagem para vê-la em tela cheia;
- Deslize para cima / para baixo para fechar a view;
- Toque na seta de navegação para fechar a view;
- Toque duas vezes / aperte a imagem quando abrir para ampliar.
Bom, é isso galera…
Espero que a dica tenha sido útil à vocês, e que possam utilizá-la daqui pra frente..
O Código fonte para tudo isso que fizemos, encontra-se aqui.
Valeu, até mais!
About author
You might also like
Curso completo e grátis de Ionic 2 em português
Share this on WhatsAppVeja como aprender Ionic 2 Hoje trago uma notícia que irá interessar muita gente, fechei uma parceria com um desenvolvedor de Ionic 1 e Ionic 2 e
Curso Ionic em português – Aula 6 – Excluindo e pesquisando dados
Share this on WhatsAppVeja como excluír e pesquisar dados na localStorage Pessoal, continuando com nossa série de vídeo aulas, hoje trago para vocês dicas de como excluír dados na localStorage,
Flutter – Conhecendo o SDK mobile do Google
Share this on WhatsAppOlá pessoal, beleza? Há cerca de 3 anos venho me dedicando fortemente ao desenvolvimento mobile com o Ionic Framework. Porém, há 5 ou 6 meses uma nova
8 Comments
Paladino
março 02, 00:20Elaynne
março 13, 17:39david
abril 18, 16:40kofmaniac
junho 22, 11:04Junior Abranches
julho 03, 09:22Paulo Neto
outubro 15, 16:42phelipeguedes
novembro 04, 03:09tadeu diniz
março 13, 15:00