当前位置：首页 > JavaScript

js 实现缩放

2026-02-01 15:33:33JavaScript

使用 CSS transform 实现缩放

通过 CSS 的 transform: scale() 属性可以轻松实现元素的缩放效果。在 JavaScript 中动态修改这个属性：

const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大1.5倍

监听滚轮事件实现交互缩放

结合 wheel 事件可以实现鼠标滚轮控制的缩放效果：

let scale = 1;
const target = document.querySelector('.zoomable');

target.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4); // 限制缩放范围
  target.style.transform = `scale(${scale})`;
});

使用动画库实现平滑缩放

GSAP 等动画库可以提供更流畅的缩放动画：

gsap.to(".box", {
  duration: 0.5,
  scale: 2,
  ease: "power2.out"
});

Canvas 元素的内容缩放

对于 Canvas 绘图，需要通过变换坐标系实现缩放：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function drawScaled(scale) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.scale(scale, scale);
  // 绘制内容...
  ctx.restore();
}

响应式视口缩放

针对移动设备的视口缩放可以通过 meta 标签控制：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

使用 ResizeObserver 监听元素尺寸变化

当需要响应元素实际尺寸变化时：

const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`当前尺寸: ${width}x${height}`);
  }
});
observer.observe(document.getElementById('resizeTarget'));

物理引擎中的缩放实现

在使用 Matter.js 等物理引擎时，缩放需要特殊处理：

// 创建可缩放物体
const body = Bodies.rectangle(400, 200, 80, 80);
Composite.add(engine.world, body);

// 缩放时需要更新物理碰撞体
function scaleBody(body, scale) {
  Body.scale(body, scale, scale);
}

每种方法适用于不同场景，CSS transform 适合普通 DOM 元素，Canvas 缩放适合自定义绘图，物理引擎则需要特殊处理以保持物理特性。

js 实现缩放