js 实现缩放
使用 CSS transform 实现缩放
通过 CSS 的 transform: scale() 属性实现缩放效果，适用于 DOM 元素。
const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大至1.5倍
element.style.transition = 'transform 0.3s ease'; // 添加过渡动画监听鼠标滚轮事件缩放
通过 wheel 事件动态调整缩放比例，常用于地图或画布交互。
let scale = 1;
const target = document.getElementById('target');
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})`;
});使用 Canvas API 缩放
Canvas 的 scale() 方法可对绘制内容进行缩放，需结合 save() 和 restore() 管理状态。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.save();
ctx.scale(2, 2); // 横向和纵向均放大2倍
ctx.fillRect(10, 10, 50, 50); // 绘制矩形（实际尺寸会受缩放影响）
ctx.restore();SVG 元素的缩放
通过修改 SVG 的 transform 属性或直接调整 viewBox 实现缩放。
const svg = document.getElementById('svg-element');
svg.setAttribute('transform', 'scale(0.8)'); // 缩小至80%使用第三方库（如 Hammer.js）
适用于手势缩放场景，例如移动端双指缩放。
import Hammer from 'hammerjs';
const element = document.getElementById('target');
const mc = new Hammer(element);
mc.get('pinch').set({ enable: true });
mc.on('pinch', (e) => {
element.style.transform = `scale(${e.scale})`;
});性能优化建议
- 对频繁缩放的元素使用
will-change: transform提升渲染性能。 - 在 Canvas 或 WebGL 中，避免频繁重绘，可通过离屏渲染优化。
- 使用
requestAnimationFrame控制动画帧率。
根据具体场景选择合适的方法，CSS 变换适合简单 UI 元素，Canvas/SVG 适合图形处理，手势库则适合交互复杂的场景。
