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 个像素。在动画后，直接将 scale、x 和 y 属性应用到内容的 CSS transform 属性。

活动

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