Showing Posts From

frontend

Soulock
2026年05月19日
- 技术

JS 判断空值排除 0 与 Canvas 滚轮缩放图片实现

JS 判断空值但 0 不算空直接用 !value 的问题： if (!value) { ... } // 会把 0、false、NaN、''、null、undefined 全算空 // 经常误伤数字 0正确写法 —— 只排除 null、undefined、空字符串： if (value == null || value === '') { // 空值 }value == null 会同时匹配 null 和 undefined（宽松相等），不会匹配 0 或 false。封装函数 function isEmpty(value) { return value == null || value === ''; }isEmpty(null) // true isEmpty(undefined) // true isEmpty('') // trueisEmpty(0) // false isEmpty(false) // false isEmpty([]) // false isEmpty({}) // false同时排除全空格字符串 function isEmpty(value) { return value == null || (typeof value === 'string' && value.trim() === ''); }isEmpty(' ') // true isEmpty(' a ') // falseCanvas 滚轮缩放图片核心思路：记录 scale（缩放比）和 offsetX/Y（画布偏移量），每次绘制时先平移再缩放。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> html, body { margin: 0; height: 100%; overflow: hidden; background: #111; } canvas { display: block; width: 100vw; height: 100vh; cursor: grab; } </style> </head> <body> <canvas id="canvas"></canvas> <script> const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d");canvas.width = window.innerWidth; canvas.height = window.innerHeight;const img = new Image(); img.src = "https://picsum.photos/1200/800";let scale = 1; let offsetX = 0; let offsetY = 0;img.onload = () => draw();function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(offsetX, offsetY); ctx.scale(scale, scale); ctx.drawImage(img, 0, 0); ctx.restore(); }// 滚轮缩放 canvas.addEventListener("wheel", (e) => { e.preventDefault(); const mouseX = e.offsetX; const mouseY = e.offsetY; // 鼠标在图片坐标系中的位置（缩放前） const x = (mouseX - offsetX) / scale; const y = (mouseY - offsetY) / scale; const zoom = e.deltaY < 0 ? 1.1 : 0.9; scale *= zoom; scale = Math.max(0.1, Math.min(scale, 20)); // 限制范围 // 缩放后修正偏移，保证鼠标所在点不漂移 offsetX = mouseX - x * scale; offsetY = mouseY - y * scale; draw(); }, { passive: false });// 拖拽移动 let dragging = false; let lastX = 0, lastY = 0;canvas.addEventListener("mousedown", (e) => { dragging = true; lastX = e.clientX; lastY = e.clientY; canvas.style.cursor = "grabbing"; });window.addEventListener("mousemove", (e) => { if (!dragging) return; offsetX += e.clientX - lastX; offsetY += e.clientY - lastY; lastX = e.clientX; lastY = e.clientY; draw(); });window.addEventListener("mouseup", () => { dragging = false; canvas.style.cursor = "grab"; });window.addEventListener("resize", () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; draw(); }); </script> </body> </html>鼠标中心缩放原理缩放时要保持鼠标位置不变，关键公式： // 缩放前：鼠标在图片坐标系的位置 x = (mouseX - offsetX) / scale// 缩放后：offsetX 要满足 mouseX = x * newScale + newOffsetX newOffsetX = mouseX - x * newScale即先算出鼠标对应图片上的点坐标，缩放后重新反算偏移量。不做这一步，图片会向左上角方向漂移。 { passive: false } 的作用 wheel 事件的 e.preventDefault() 阻止页面滚动，必须在监听器选项里显式传 { passive: false }，否则浏览器忽略 preventDefault() 并输出警告。