How to use setCenter (x: number, y: number)?

[ahboyboy]

Hello,

May I know how to use this function? Where should I call the provider? I am trying to set the center to (0,0). Sorry for this silly question, I am new to ionic and angular:)

Thanks.

[leonardosalles]

You need to import the provider and use this when you want to change the center of zoom manually. For example, I am with zoom in point A and have button see point B when user click on it, the zoom center goes to point B(this is just an example you will need to find the X and Y of point B).

import { ZoomAreaProvider } from 'ionic2-zoom-area';

...
constructor(public zoomAreaProvider: ZoomAreaProvider) {
}

goToPointB() {
    this.zoomAreaProvider.setCenter(100, 200);
}
....

[ahboyboy]

Hi Leonardosalles, Thanks for the reply. I managed to implement the pitch and zoom feature.^^

I have another question on how to make the context scrollable? Before I insert to the html, the page is scrollable, but after I insert , the page cannot be scrolled when the page is loaded. It is scrollable only when I pitch and zoom the content.

Following are the snippet of the html code:

<ion-header>
  <ion-navbar>
    <ion-title>{{'Topic 1.1 What is diabetes?' | translate}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="list-big-content">
    <zoom-area [(scale)]="scale" (afterZoomIn)="afterZoomIn($event)" (afterZoomOut)="afterZoomOut($event)" [(controls)]="showControls">
    <div class="topic-description">
      • Diabetes is a chronic medical condition in which a person has high blood sugar.
      <br />
      <br /> • Insulin is the hormone produced by the pancreas. It allows glucose move from the blood into the cells where it can
      be used as energy.
      <br />
      <br /> • People with diabetes either do not make enough insulin (Type 1 Diabetes), or the insulin they make does not work
      properly (Type 2 Diabetes). As a result, the glucose stays in the blood and increases over time.
      <br />
      <br />
      <img src="./assets/images/education/read/topicone/topiconeone.png" class="center" />
    </div>
  </zoom-area>
</ion-content>