js实现缩放
使用 CSS transform 实现缩放
通过 CSS 的 transform: scale() 属性可以实现元素的缩放效果。JavaScript 可以动态控制这个属性。
const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大1.5倍监听滚轮事件实现交互缩放
结合 wheel 事件可以实现基于滚轮的交互式缩放：
const target = document.getElementById('zoomable');
let scale = 1;
target.addEventListener('wheel', (e) => {
e.preventDefault();
scale += e.deltaY * -0.01;
scale = Math.min(Math.max(0.5, scale), 4); // 限制缩放范围
target.style.transform = `scale(${scale})`;
});使用 Canvas 实现内容缩放
对于 Canvas 绘图，可以通过调整变换矩阵实现缩放：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let currentScale = 1;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(currentScale, currentScale);
// 绘制内容...
ctx.restore();
}
function zoom(factor) {
currentScale *= factor;
draw();
}实现平滑动画缩放
结合 CSS 过渡属性可以实现平滑的缩放动画：
const box = document.querySelector('.box');
box.style.transition = 'transform 0.3s ease';
box.style.transform = 'scale(1.2)';视口缩放实现
对于整个页面视口的缩放控制：
function setViewportScale(scale) {
document.querySelector('meta[name="viewport"]')
.setAttribute('content', `width=device-width, initial-scale=${scale}`);
}基于鼠标位置的缩放
实现以鼠标位置为中心的精确缩放：
let scale = 1;
const container = document.getElementById('container');
container.addEventListener('wheel', (e) => {
e.preventDefault();
const rect = container.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const delta = -e.deltaY * 0.01;
const newScale = Math.min(Math.max(0.5, scale + delta), 4);
const scaleDiff = newScale / scale;
container.style.transformOrigin = `${mouseX}px ${mouseY}px`;
container.style.transform = `scale(${newScale})`;
scale = newScale;
});使用第三方库实现高级缩放
考虑使用专门的缩放库如：
- panzoom：轻量级的平移缩放库
- Hammer.js：支持手势缩放
- Three.js：3D场景缩放控制
// 使用panzoom示例
const element = document.getElementById('panzoom-element');
panzoom(element, {
maxZoom: 5,
minZoom: 0.5
});
