js 实现缩放
使用 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 缩放适合自定义绘图，物理引擎则需要特殊处理以保持物理特性。
