方法與屬性

在 Zoomist 實例化之後，你便可以在實例中存取其方法與屬性。

範例：

const zoomist = new Zoomist('.zoomist-container')

// 方法
zoomist.zoom(0.1)
// 屬性
console.log(zoomist.transform)

方法

所有可使用的方法（以下以 zoomist 變數作為範例）：

方法	參數型別	描述
`zoomist.zoom(scale)`	`scale: number`	以一個相對的值縮放 `.zoomist-image`。正數用以放大, 負數用以縮小。
`zoomist.zoomTo(scale)`	`scale: number`	縮放 `.zoomist-image` 至一個絕對的值，這個數值的大小必須介於 `minScale` 和 `maxScale` 之間。
`zoomist.move(translate)`	`translate: {x: number, y: number}`	以一個相對的 `x` 及 `y` 移動 `.zoomist-image`。
`zoomist.moveTo(translate)`	`translate: {x: number, y: number}`	移動 `.zoomist-image` 至一個絕對的 `x` 及 `y`。 `x` 可被設置為關鍵字 `left`, `right`, `center`。 `y` 可被設置為關鍵字 `top`, `bottom`, `center`。
`zoomist.slideTo(value)`	`value: number`	可將滑桿的值設定為一個介於 0 與 100 之間的值。而 `.zoomist-image` 也會自動地縮放至對應的大小。
`zoomist.reset()`		將 `.zoomist-image` 恢復為初始狀態。
`zoomist.destroy(cleanStyle)`	`cleanStyle: boolean`	將 Zoomist 銷毀並移除所有事件監聽。若將參數 `cleanStyle` 設為 `true` 則會移除 `.zoomist-image` 上的所有樣式。
`zoomist.destroySlider()`		銷毀滑桿。
`zoomist.destroyZoomer()`		銷毀縮放按鈕。
`zoomist.destroyModules()`		銷毀滑桿及縮放按鈕。
`zoomist.update(options)`	`options: ZoomistOptions`	更新 Zoomist。若傳入新的選項，則將會以新傳入的選項更新 Zoomist。
`zoomist.getContainerData()`		取得 `.zoomist-container` 資訊。
`zoomist.getImageData()`		取得 `.zoomist-image` 資訊。
`zoomist.getSliderValue()`		取得當前滑桿的值。
`zoomist.isOnBoundX()`		檢查 `.zoomist-image` 是否剛好觸碰到左或右邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnBoundY()`		檢查 `.zoomist-image` 是否剛好觸碰到上或下邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnBoundTop()`		檢查 `.zoomist-image` 是否剛好觸碰到上邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnBoundBottom()`		檢查 `.zoomist-image` 是否剛好觸碰到下邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnBoundLeft()`		檢查 `.zoomist-image` 是否剛好觸碰到左邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnBoundRight()`		檢查 `.zoomist-image` 是否剛好觸碰到右邊界。只會作用在 `bounds` 被設定成 `true` 時。
`zoomist.isOnMinScale()`		檢查 `.zoomist-image` 是否剛好縮放至 `minScale`
`zoomist.isOnMaxScale()`		檢查 `.zoomist-image` 是否剛好縮放至 `maxScale`
`zoomist.on(event, handler)`	`event: string, handler: function`	添加事件處理。（查看所有事件）

你可以透過這些有用的方法，做出很多額外的功能。

例如，製作一個置中按鈕：

<!-- centered-button -->
<button class="centered-button"></button>
<!-- zoomist -->
<div class="zoomist-container">
  <div class="zoomist-wrapper">
    <div class="zoomist-image">
      <!-- your content -->
    </div>
  </div>
</div>

const zoomist = new Zoomist('.zoomist-container')

document.querySelector('.centered-button').addEventListener('click', () => {
  zoomist.moveTo({ x: 0, y: 0 })
})

屬性

Porperty	Type	Description
`zoomist.element`	`HTMLElement`	`.zoomist-container` HTML 元素。
`zoomist.wrapper`	`HTMLElement`	`.zoomist-wrapper` HTML 元素。
`zoomist.image`	`HTMLElement`	`.zoomist-image` HTML 元素。
`zoomist.options`	`object`	當前應用的 `ZoomistOptions`。
`zoomist.mounted`	`boolean`	若 Zoomist 初始化完成則為 `true`。
`zoomist.states`	`object`	當前 `dragging`, `pinching`, `wheeling` 的狀態。
`zoomist.transform`	`object`	當前 `.zoomist-image` 的縮放及位移資訊。
`zoomist.data`	`object`	Zoomist 在運作時所需的資料。

你可以從這些屬性中得到一些有用的資訊。

例如，取得當前 Zoomist 的縮放大小：

const zoomist = new Zoomist('.zoomist-container')

document.querySelector('.get-scale-button').addEventListener('click', () => {
  const { scale } = zoomist.transform
  console.log(scale)
})