amp-pan-zoom

1.0 0.1

<script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-0.1.js"></script>

用法

<amp-pan-zoom> 元件接受一個任意內容的子元素，並讓使用者能夠透過雙擊或雙指捏合縮放手勢來縮放和平移內容。在可縮放內容或其子元素上註冊的點擊事件將在 300 毫秒延遲後觸發。

<amp-layout layout="responsive" width="4" height="3">
  <amp-pan-zoom layout="fill">
    <svg>
      ...
    </svg>
  </amp-pan-zoom>
</amp-layout>

有效的子標籤

請參閱 amp-pan-zoom 的 合格子標籤列表。

屬性

max-scale (選填)

指定最大縮放比例，應為 1 到 9 的正數。預設值為 3。

initial-scale (選填)

指定預設縮放比例，應為 1 到 9 的正數。預設值為 1。

initial-x、initial-y (選填)

指定預設平移座標，否則兩者都設定為 0。該值應為整數。

reset-on-resize (選填)

指將圖片置中並將圖片比例設定回 1 的功能。設定此屬性會導致元件在圖片本身大小調整時重設可縮放內容。

controls (選填)

顯示預設控制項（放大/縮小按鈕），這些控制項可以透過公開 CSS 類別進行自訂。

通用屬性

此元素包含擴展到 AMP 元件的 通用屬性。

動作

transform

transform 動作接受 scale、x、y 作為參數，並設定子內容的 CSS transform 屬性。如果未指定 x 或 y 值，則內容會縮放至中心。

假設頁面上存在一個 id 為 pan-zoom 的 <amp-pan-zoom> 元件，一個帶有 on="tap:pan-zoom.transform(scale=3)" 的按鈕將在內容中心縮放至 3 倍比例，一個帶有 on="tap:pan-zoom.transform(scale=3, x=50, y=10)" 的按鈕將首先將內容縮放至 3 倍比例，然後將內容向左移動 50 像素，向上移動 10 像素。請考慮動畫後直接應用於內容 CSS transform 屬性的 scale、x 和 y 屬性。

活動

transformEnd

每當平移或縮放動畫完成時，<amp-pan-zoom> 元件就會觸發 transformEnd 事件。此事件會發出 scale、x 和 y 參數。scale 參數包含正在縮放的子內容的目前比例。x 和 y 參數分別包含子內容從中心開始的 x 和 y 平移（以像素為單位）。

此範例包含一個 amp-pan-zoom 元件，該元件將在 transformEnd 時更新 amp-state。

<amp-state id="transform">
  <script type="application/json">
    {
      "scale": 1,
      "y": 0,
      "x": 0
    }
  </script>
</amp-state>
<p
  [text]="'Current scale: ' + transform.scale + ', x: ' + transform.x + ', y: ' + transform.y"
>
  Current scale: 1
</p>
<amp-pan-zoom
  layout="responsive"
  width="1"
  height="1"
  id="pan-zoom"
  on="transformEnd:AMP.setState({transform: {scale: event.scale, x: event.x, y: event.y}})"
>
  ...
</amp-pan-zoom>

樣式

以下公開 CSS 類別可用於自訂縮放按鈕

.amp-pan-zoom-button .amp-pan-zoom-in-icon .amp-pan-zoom-out-icon;

使用 .amp-pan-zoom-button 自訂所有按鈕的尺寸、定位、背景顏色、邊框半徑。使用 .amp-pan-zoom-in-icon 自訂放大按鈕的圖示。使用 .amp-pan-zoom-out-icon 自訂縮小按鈕的圖示。您也可以完全隱藏這些按鈕，並使用 transform 動作建立自己的按鈕。若要隱藏它們，只需套用

.amp-pan-zoom-button {
  display: none;
}

驗證

請參閱 AMP 驗證器規格中的 amp-pan-zoom 規則。