A zoom area component with pinch support to zoom any element in page
To see this in action, checkout the example project here.
IMPORTANT: This module requires Angular Animations and should be included in the app module.
<zoom-area>
<div>
zoom it
</div>
or
<img src="zoom-it.jpg" alt="zoom it">
</zoom-area>npm i --save @angular/animationsimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';And then
imports: [
...
BrowserAnimationsModule,
...
]npm i --save ionic2-zoom-areaImport ZoomAreaModule.forRoot() in your app's main module
import { ZoomAreaModule } from 'ionic2-zoom-area';
@NgModule({
...
imports: [
...
ZoomAreaModule.forRoot()
],
...
})
export class AppModule {}If your app uses lazy loading, you need to import ZoomAreaModule in your shared module or child modules:
import { ZoomAreaModule } from 'ionic2-zoom-area';
@NgModule({
...
imports: [
...
ZoomAreaModule
],
...
})
export class SharedModule {}(optional) (two-way) The scale of your initial zoom. Defaults to 1.
(optional) (two-way) It allow you to hide or show zoom controls. Defaults to true.
Listen to this event to be notified when the user interact with zoom in.
Listen to this event to be notified when the user interact with zoom out.
notifyScroll(): voidIt broadcast an event when user scroll content inside zoom area.
onScroll$: ObservableIt allows you to listen for a scroll event inside your zoom area. You can use it to collapse you header for example.
this.zoomAreaProvider.onScroll$.subscribe(state => {
if (state === this.zoomAreaProvider.SCROLL_STATE.COLLAPSED) {
console.log('Hide header');
}
if (state === this.zoomAreaProvider.SCROLL_STATE.EXPANDED) {
console.log('Show header');
}
});scrollState$: ObservableIt allows you to listen for a change in scroll state.
this.zoomAreaProvider.scrollState$.subscribe(state => {
console.log('Do whatever you want when scrollState change');
});setCenter: FunctionIt allows you to change the position of the zoom manually if zoom scale is greather than 1.
this.zoomAreaProvider.setCenter(x, y);
this.zoomAreaProvider.setCenter(20, 50);<zoom-area [(scale)]="scale" (afterZoomIn)="afterZoomIn($event)" (afterZoomOut)="afterZoomOut($event)" [(controls)]="showControls">
<div>Zoom It</div>
or
<img src="assets/image-to-zoom.jpg" alt="Zoom It">
</zoom-area>- ✅(1.0.10) - Add support to move center of zoom
- Having an issue? or looking for support? Open an issue and we will get you the help you need.
- Got a new feature or a bug fix? Fork the repo, make your changes, and submit a pull request.
If you find this project useful, please star the repo to let people know that it's reliable. Also, share it with friends and colleagues that might find this useful as well. Thank you 😄
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent