当前位置: 首页> 文旅> 艺术 > 【前端】原生实现图片的放大与缩放

【前端】原生实现图片的放大与缩放

时间:2025/7/11 22:43:37来源:https://blog.csdn.net/karshey/article/details/140469914 浏览次数:0次

需求

点击图片,出现一个蒙版和图片,双指捏合可以使图片放大或缩小。

使用前端框架是svelte,但是不影响,功能都是JS实现。

代码

相关定义:

  import { onMount, afterUpdate, onDestroy } from 'svelte';let imgDetailRef;let initialDistance = 0;let initialScale = 1;let currentScale = 1;

定义监听事件触发的方法:

scale(${currentScale})是缩放相关的样式。

  const getDistanceBetweenTouches = (ev) => {let [touch1, touch2] = ev.touches;return Math.sqrt(Math.pow(touch1.pageX - touch2.pageX, 2) +Math.pow(touch1.pageY - touch2.pageY, 2),);};const touchStartHandler = function (ev) {if (ev.touches.length === 2) {initialDistance = getDistanceBetweenTouches(ev);initialScale = currentScale;}};const touchMoveHandler = function (ev) {// 防止出现Infinity if (ev.touches.length === 2 && initialDistance !== 0) {let distance = getDistanceBetweenTouches(ev);if (distance !== initialDistance) {currentScale = (initialScale * distance) / initialDistance;// 最多只能缩小到原本大小if (currentScale < 1) currentScale = 1;imgDetailRef.style.transform = `translate(-50%, -50%) scale(${currentScale})`;}}};const touchEndHandler = function (ev) {initialDistance = 0;initialScale = currentScale;};

在生命周期中定义事件监听与销毁:

定义在afterUpdate中:我们点击图片会显示一个蒙版,图片显示在蒙版上,允许放大和缩小。因此,点击图片时才渲染这个蒙版,imgDetailRef对应的div是条件渲染,若在onMount中定义此事件的监听,此时可能不存在imgDetailRef

若存在imgDetailRef,要先把之前定义的监听移除(removeEventListener),否则会不断地触发监听事件,表示为:当手指捏合操作图片的放大和缩小时,图片的变化显得很卡,且控制台输出一堆信息(console.log写在touchMoveHandler)中。

  afterUpdate(() => {if (imgDetailRef) {imgDetailRef.removeEventListener('touchstart', touchStartHandler, false);imgDetailRef.removeEventListener('touchmove', touchMoveHandler, false);imgDetailRef.removeEventListener('touchend', touchEndHandler, false);imgDetailRef.addEventListener('touchstart', touchStartHandler, false);imgDetailRef.addEventListener('touchmove', touchMoveHandler, false);imgDetailRef.addEventListener('touchend', touchEndHandler, false);}});onDestroy(() => {if (imgDetailRef) {imgDetailRef.removeEventListener('touchstart', touchStartHandler, false);imgDetailRef.removeEventListener('touchmove', touchMoveHandler, false);imgDetailRef.removeEventListener('touchend', touchEndHandler, false);}});

至于蒙版和图片:点击图片时showImageDetail=true等,简单逻辑不赘述。

{:else if showImageDetail}<div><imgclass="img-detail"id="img-detail"bind:this={imgDetailRef}src={selectedImage}alt="selectedImage"/></div>
{/if}

如果想在蒙层出现时不允许蒙层下的内容滚动:给不想滚动的类加上此样式(会回到页面顶部)

.no-scroll {position: fixed;width: 100%;}

或让bodyoverflow:hidden

关键字:【前端】原生实现图片的放大与缩放

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: