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 规则。