amp-pan-zoom

1.0 0.1

<script async custom-element="amp-pan-zoom" src="https://cdn.ampproject.org/v0/amp-pan-zoom-1.0.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 规则。