COMPONENT 80 · Motion & Interaction

平移与缩放

Pan and Zoom

也叫Zoomable CanvasPinch to Zoom缩放画布

通过拖动、滚轮、手势或按钮浏览大画布并改变比例。

Navigates a large canvas through panning and changes scale through gestures or controls.

ANATOMY & USAGE

结构与使用建议

组成部分

可视窗口
大型画布
缩放与复位控制

适合使用

地图、图表或大图无法在一个视口完整显示时。

不建议使用

普通页面内容可以自然重排，或缩放会隐藏关键操作时。

键盘与无障碍

提供明确的放大、缩小、复位按钮和键盘方式；播报缩放比例并避免与页面缩放冲突。

DESCRIBE IT TO AI

这样告诉编程助手

实现平移与缩放（Pan and Zoom）：通过拖动、滚轮、手势或按钮浏览大画布并改变比例。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<section class="demo stack">
  <div class="canvas-viewport">
    <div class="canvas" tabindex="0" aria-label="可平移与缩放的画布">拖动或用方向键平移</div>
  </div>
  <div class="row">
    <button id="out" aria-label="缩小">−</button>
    <output id="zoom">100%</output>
    <button id="in" aria-label="放大">＋</button>
    <button id="reset">复位</button>
  </div>
</section>