社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
图片平移
图片缩放
车站标注
首页 web前端 前端问答 react怎么实现缩放

react怎么实现缩放

藏色散人
藏色散人
Dec 28, 2022 am 10:13 AM
react

react实现缩放的方法：1、监听onWheel事件；2、设置事件对象event的属性deltaY，当向上滚动时“deltaY<0”，向下滚动时“deltay>0”；3、修改每次滚动时缩放的比例，同时更改transform样式按比例进行缩放即可。

react怎么实现缩放

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react怎么实现缩放？

react图片缩放、平移（position、transform实现）

很多网页都会给文案附上一些图片补充描述，例如在说到地址时，会在旁边附上一张地图，并且在地图上标注该地址。如果附上的图片很小，很难看清楚地址的具体信息，有些产品经理会给图片设计一个可以平移、放大缩小的功能。本文将一一实现上述功能。

废话不多说，先给上效果图：

585339af207a148869e0c67262a6ee8.jpg

主要三个功能点：

  • 图片平移
  • 图片缩放
  • 车站标注

图片平移

图片平移可以监听这三个事件实现：onMouseDown、onMouseMove、onMouseUp。
onMouseDown事件记录每次鼠标按下的坐标位置；
onMouseMove事件计算出每次平移的距离，该距离加上拖动前图片距离父元素的距离就等于拖动后图片相对于父元素的距离；
onMouseUp事件触发时，注销或者不让执行onMouseDown、onMouseMove事件，防止只要鼠标移入图片就会平移。

这三个事件需要阻止浏览器的默认行为，不然在移动时会自动打开图片。
534024d6f9062f43ba14e9d0e40edfe.jpg

const WIDTH = 1200;const HEIGHT = 900;const DynamicStyle= () => {    
  const imgRef = React.createRef<HTMLImageElement>();  
  /** 图片样式 */  const [imgStyle, setImgStyle] = useState<React.CSSProperties>({});  /** 记录鼠标是否按下 */  const [mouseDowmFlag, setMouseDowmFlag] = useState(false);  /** 记录鼠标按下的坐标 */  const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0})  /** 鼠标可视区域时，重置鼠标按下的布尔值为false */  useEffect(() => {    document.onmouseover = () => {      if (mouseDowmFlag) {        setMouseDowmFlag(false);
      }
    };    return () => {      document.onmouseover = null;
    };
  }, [mouseDowmFlag])  /** 平移 */  const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => {    const { clientX, clientY } = event;
    event.stopPropagation();
    event.preventDefault(); // 阻止浏览器默认行为，拖动会打开图片    setMouseDowmFlag(true); // 控制只有在鼠标按下后才会执行mousemove    setMouseDowmPos({      x: clientX,      y: clientY,
    });
  };  const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();    const { clientX, clientY } = event;    const diffX = clientX - mouseDowmPos.x;    const diffY = clientY - mouseDowmPos.y;    if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return;    const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement;    const offsetX = parseInt(`${diffX + offsetLeft}`, 10);    const offsetY = parseInt(`${diffY + offsetTop}`, 10);    setMouseDowmPos({      x: clientX,      y: clientY,
    });    setImgStyle({
      ...imgStyle,      left: offsetX,      top: offsetY,
    });
  };  const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();    setMouseDowmFlag(false);
  };  return (    <div className={styles.imgArea}>      <img 
        src={mapImg} 
        alt=&#39;part&#39;        ref={imgRef}        height={HEIGHT} 
        style={imgStyle}        onMouseDown={handleMouseDown}        onMouseMove={handleMouseMove}        onMouseUp={handleMouseUp}
      >      </img>    </div>
  )
}
登录后复制

图片缩放

图片缩放可以监听onWheel事件，事件对象event有一个记录滚轮滚动的属性deltaY，当向上滚动时deltaY<0，向下滚动时deltaY>0。每次滚动修改其缩放的比例，同时更改transform样式按比例进行缩放。

101ba99b57b7a89ca25c91412775659.jpg

const WIDTH = 1200;const HEIGHT = 900;const SCALE = 0.2;const DynamicStyle= () => {  const imgRef = React.createRef<HTMLImageElement>();  /** 初始化缩放比例，默认为1 */  const [rate, setRate] = useState(1);  /** 图片样式 */  const [imgStyle, setImgStyle] = useState<React.CSSProperties>({});  /** 记录鼠标是否按下 */  const [mouseDowmFlag, setMouseDowmFlag] = useState(false);  /** 记录鼠标按下的坐标 */  const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0})  /** 图片现在大小 */  const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT});  useEffect(() => {    const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement;    setInitial({ width, height });    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])  // console.log(natural, initial)  useEffect(() => {    document.onmouseover = () => {      if (mouseDowmFlag) {        setMouseDowmFlag(false);
      }
    };    return () => {      document.onmouseover = null;
    };
  }, [mouseDowmFlag])  /** 缩放 */  const handleWheelImage = (event: React.WheelEvent<HTMLImageElement>) => {    // 向上为负，向下为正    const bigger = event.deltaY > 0 ? -1 : 1;    // transform偏移量    const transformX = -initial.width / 2;    const transformY = -initial.height / 2;    if (bigger > 0 && rate < 2) {      const enlargeRate = rate + SCALE;      setImgStyle({
        ...imgStyle,        transform: `matrix(${enlargeRate}, 0, 0, ${enlargeRate}, ${transformX}, ${transformY})`, // 默认以图片中心为原点进行缩放
      });      setRate(enlargeRate);
    } else if (bigger < 0 && rate > 1) {      const shrinkRate = rate - SCALE;      setImgStyle({
        ...imgStyle,        transform: `matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})`,
      });      setRate(shrinkRate);
    }
  }  /** 平移 */  const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => {    const { clientX, clientY } = event;
    event.stopPropagation();
    event.preventDefault(); // 阻止浏览器默认行为，拖动会打开图片    setMouseDowmFlag(true); // 控制只有在鼠标按下后才会执行mousemove    setMouseDowmPos({      x: clientX,      y: clientY,
    });
  };  const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();    const { clientX, clientY } = event;    const diffX = clientX - mouseDowmPos.x;    const diffY = clientY - mouseDowmPos.y;    if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return;    const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement;    const offsetX = parseInt(`${diffX + offsetLeft}`, 10);    const offsetY = parseInt(`${diffY + offsetTop}`, 10);    setMouseDowmPos({      x: clientX,      y: clientY,
    });    setImgStyle({
      ...imgStyle,      left: offsetX,      top: offsetY,
    });
  };  const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();    setMouseDowmFlag(false);
  };  return (    <div className={styles.imgArea}>      <img 
        src={mapImg} 
        alt=&#39;part&#39; 
        height={HEIGHT} 
        style={imgStyle}        ref={imgRef}        onWheel={handleWheelImage}        onMouseDown={handleMouseDown}        onMouseMove={handleMouseMove}        onMouseUp={handleMouseUp}
      >      </img>    </div>
  )
}
登录后复制
.imgArea {  position: relative;  width: 1200px;  height: 900px;  margin: auto;  border: 1px solid #da2727;  overflow: hidden;
  & > img {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    cursor: move;
  }
}
登录后复制

如果没有设置transformOrigin，默认是相对于图片中心进行缩放，但是在初始为了让图片在可视区域内水平垂直居中，使用了transform: translate(-50%, -50%);，因此为了缩放时相对于图片中心点，需要设置matrix的第5、6个参数矫正transformOrigin，transform: matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})

车站标注

首先，定义一个常量表示图标的坐标，这个坐标是相对于原始图片左上角的定位。

const imgInfo = {  lableLeft: "1900",  lableTop: "2000",}
登录后复制

这里，解释一下原始图的概念：
7a51b92aec037fa628f94c87386554d.jpg

随便在网上查看一个图片元素，比如上面。1200 x 900是页面定的图片大小，但图片还有一个真实大小4535 x 3402。

要计算图标在没有平移缩放时的初始坐标之前，需要算出图片的缩放比例（不是上面的rate）：

/** 图片原始大小，默认设置为1是防止计算图片原始大小与初始大小比例出现无穷大 */const [natural, setNatural] = useState<{width: number, height: number}>({width: 1, height: 1});/** 图片现在大小 */const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT});useEffect(() => {    const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement;    setNatural({ width: naturalWidth, height: naturalHeight });    setInitial({ width, height });    // eslint-disable-next-line react-hooks/exhaustive-deps}, [])  
// 初始图片缩放比例（图片有原始的图片大小）const imgScaleRateX = initial.width / natural.width;const imgScaleRateY = initial.height / natural.height;
登录后复制

图标初始的坐标就可以计算出：

const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX;const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY;
登录后复制

当图片平移时，图标也需要跟着平移，这是的坐标计算：

// 图标相对父元素坐标 = 图标位置坐标 + 图片坐标const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX + Number(imgStyle.left || WIDTH / 2);
const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY + Number(imgStyle.top || HEIGHT / 2);
登录后复制

00398719e4952a9190f7217e6c4afb9.jpg

当图片缩放时，图标需要随着图片一起缩放。如果没有对图标设置transformOrigin，默认时相对图标的中心缩放的。为了保证图标随着图片一起缩放，那就必须使得图片和图标的缩放参照原点相同，图标的transformOrigin应该设置为相对于图片原点的距离。

const labelTransformOrigin = () => {    return `${initial.width / 2 - Number(imgInfo.lableLeft) * imgScaleRateX}px ${
        initial.height / 2 - Number(imgInfo.lableTop) * imgScaleRateY
    }px`;
}
登录后复制

b0cb704e7f421de9e09d068675db7bf.jpg

整体代码示例：

const imgInfo = {
  lableLeft: "1900",
  lableTop: "2000",
}

const WIDTH = 1200;
const HEIGHT = 900;
const SCALE = 0.2;

const DynamicStyle= () => {

  const imgRef = React.createRef<HTMLImageElement>();
  /** 初始化缩放比例，默认为1 */
  const [rate, setRate] = useState(1);
  /** 图片样式 */
  const [imgStyle, setImgStyle] = useState<React.CSSProperties>({});
  /** 记录鼠标是否按下 */
  const [mouseDowmFlag, setMouseDowmFlag] = useState(false);
  /** 记录鼠标按下的坐标 */
  const [mouseDowmPos, setMouseDowmPos] = useState<{x: number, y: number}>({x: 0, y: 0})
  /** 图片原始大小，默认设置为1是防止计算图片原始大小与初始大小比例出现无穷大 */
  const [natural, setNatural] = useState<{width: number, height: number}>({width: 1, height: 1});
  /** 图片现在大小 */
  const [initial, setInitial] = useState<{width: number, height: number}>({width: WIDTH, height: HEIGHT});

  useEffect(() => {
    const { naturalWidth, naturalHeight, width, height } = imgRef.current as HTMLImageElement;
    setNatural({ width: naturalWidth, height: naturalHeight });
    setInitial({ width, height });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    document.onmouseover = () => {
      if (mouseDowmFlag) {
        setMouseDowmFlag(false);
      }
    };
    return () => {
      document.onmouseover = null;
    };
  }, [mouseDowmFlag])

  /** 缩放 */
  const handleWheelImage = (event: React.WheelEvent<HTMLImageElement>) => {
    // 向上为负，向下为正
    const bigger = event.deltaY > 0 ? -1 : 1;
    // transform偏移量
    const transformX = -initial.width / 2;
    const transformY = -initial.height / 2;
    if (bigger > 0 && rate < 2) {
      const enlargeRate = rate + SCALE;
      setImgStyle({
        ...imgStyle,
        transform: `matrix(${enlargeRate}, 0, 0, ${enlargeRate}, ${transformX}, ${transformY})`, // 默认以图片中心为原点进行缩放
      });
      setRate(enlargeRate);
    } else if (bigger < 0 && rate > 1) {
      const shrinkRate = rate - SCALE;
      setImgStyle({
        ...imgStyle,
        transform: `matrix(${shrinkRate}, 0, 0, ${shrinkRate}, ${transformX}, ${transformY})`,
      });
      setRate(shrinkRate);
    }
  }

  /** 平移 */
  const handleMouseDown = (event: React.MouseEvent<HTMLImageElement>) => {
    const { clientX, clientY } = event;
    event.stopPropagation();
    event.preventDefault(); // 阻止浏览器默认行为，拖动会打开图片
    setMouseDowmFlag(true); // 控制只有在鼠标按下后才会执行mousemove
    setMouseDowmPos({
      x: clientX,
      y: clientY,
    });
  };

  const handleMouseMove = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();
    const { clientX, clientY } = event;
    const diffX = clientX - mouseDowmPos.x;
    const diffY = clientY - mouseDowmPos.y;
    if (!mouseDowmFlag || (diffX === 0 && diffY === 0)) return;
    const { offsetLeft, offsetTop } = imgRef.current as HTMLImageElement;
    const offsetX = parseInt(`${diffX + offsetLeft}`, 10);
    const offsetY = parseInt(`${diffY + offsetTop}`, 10);

    setMouseDowmPos({
      x: clientX,
      y: clientY,
    });
    setImgStyle({
      ...imgStyle,
      left: offsetX,
      top: offsetY,
    });
  };

  const handleMouseUp = (event: React.MouseEvent<HTMLImageElement>) => {
    event.stopPropagation();
    event.preventDefault();
    setMouseDowmFlag(false);
  };

  // 初始图片缩放比例（图片有原始的图片大小）
  const imgScaleRateX = initial.width / natural.width;
  const imgScaleRateY = initial.height / natural.height;

  const labelTransformOrigin = () => {
    return `${initial.width / 2 - Number(imgInfo.lableLeft) * imgScaleRateX}px ${
      initial.height / 2 - Number(imgInfo.lableTop) * imgScaleRateY
    }px`;
  }

  /** 图标位置计算 */
  const labelStyle = (): React.CSSProperties => {
    const transformX = -initial.width / 2;
    const transformY = -initial.height / 2;
    // 图标相对父元素坐标 = 图标初始位置坐标 + 平移量
    const labelLeft = parseInt(`${imgInfo.lableLeft}`, 10) * imgScaleRateX + Number(imgStyle.left || WIDTH / 2);
    const labelTop = parseInt(`${imgInfo.lableTop}`, 10) * imgScaleRateY + Number(imgStyle.top || HEIGHT / 2);
    return {
      left: labelLeft,
      top: labelTop,
      transformOrigin: labelTransformOrigin(),
      transform: `matrix(${rate}, 0, 0, ${rate}, ${transformX}, ${transformY})`,
    }
  }


  return (
    <div className={styles.imgArea}>
      <img 
        src={mapImg} 
        alt=&#39;part&#39; 
        height={HEIGHT} 
        style={imgStyle}
        ref={imgRef}
        onWheel={handleWheelImage}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
      >
      </img>
      <span className={styles.label} style={labelStyle()}></span>
    </div>
  )
}
登录后复制

推荐学习：《react视频教程》

以上是react怎么实现缩放的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前 By DDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7523
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
81
11
win11激活密钥永久
54
19
NYT连接提示和答案
21
74
显示更多
Related knowledge
如何利用React和WebSocket构建实时聊天应用 如何利用React和WebSocket构建实时聊天应用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket构建实时聊天应用引言：随着互联网的快速发展，实时通讯越来越受到人们的关注。实时聊天应用已经成为现代社交和工作生活中不可或缺的一部分。本文将介绍如何利用React和WebSocket构建一个简单的实时聊天应用，并提供具体的代码示例。一、技术准备在开始构建实时聊天应用之前，我们需要准备以下技术和工具：React：一个用于构建

React前后端分离指南：如何实现前后端的解耦和独立部署 React前后端分离指南：如何实现前后端的解耦和独立部署 Sep 28, 2023 am 10:48 AM

React前后端分离指南：如何实现前后端的解耦和独立部署，需要具体代码示例在当今的Web开发环境中，前后端分离已经成为一种趋势。通过将前端和后端代码分开，可以使得开发工作更加灵活、高效，并且方便进行团队协作。本文将介绍如何使用React实现前后端分离，从而实现解耦和独立部署的目标。首先，我们需要理解什么是前后端分离。传统的Web开发模式中，前端和后端是耦合在

如何利用React和Flask构建简单易用的网络应用 如何利用React和Flask构建简单易用的网络应用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask构建简单易用的网络应用引言：随着互联网的发展，网络应用的需求也越来越多样化和复杂化。为了满足用户对于易用性和性能的要求，使用现代化的技术栈来构建网络应用变得越来越重要。React和Flask是两种在前端和后端开发中非常受欢迎的框架，它们可以很好的结合在一起，用来构建简单易用的网络应用。本文将详细介绍如何利用React和Flask

如何利用React和RabbitMQ构建可靠的消息传递应用 如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言：现代化的应用程序需要支持可靠的消息传递，以实现实时更新和数据同步等功能。React是一种流行的JavaScript库，用于构建用户界面，而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用，并提供具体的代码示例。RabbitMQ概述：

React响应式设计指南：如何实现自适应的前端布局效果 React响应式设计指南：如何实现自适应的前端布局效果 Sep 26, 2023 am 11:34 AM

React响应式设计指南：如何实现自适应的前端布局效果随着移动设备的普及和用户对多屏幕体验的需求增加，响应式设计成为了现代前端开发的重要考量之一。而React作为目前最流行的前端框架之一，提供了丰富的工具和组件，能够帮助开发人员实现自适应的布局效果。本文将分享一些关于使用React实现响应式设计的指南和技巧，并提供具体的代码示例供参考。使用React的Fle

React代码调试指南：如何快速定位和解决前端bug React代码调试指南：如何快速定位和解决前端bug Sep 26, 2023 pm 02:25 PM

React代码调试指南：如何快速定位和解决前端bug引言：在开发React应用程序时，经常会遇到各种各样的bug，这些bug可能使应用程序崩溃或导致不正确的行为。因此，掌握调试技巧是每个React开发者必备的能力。本文将介绍一些定位和解决前端bug的实用技巧，并提供具体的代码示例，帮助读者快速定位和解决React应用程序中的bug。一、调试工具的选择：在Re

React Router使用指南：如何实现前端路由控制 React Router使用指南：如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南：如何实现前端路由控制随着单页应用的流行，前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库，提供了丰富的功能和易用的API，使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法，并提供一些具体的代码示例。安装ReactRouter首先，我们需

如何利用React和Google BigQuery构建快速的数据分析应用 如何利用React和Google BigQuery构建快速的数据分析应用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery构建快速的数据分析应用引言：在当今信息爆炸的时代，数据分析已经成为了各个行业中不可或缺的环节。而其中，构建快速、高效的数据分析应用则成为了许多企业和个人追求的目标。本文将介绍如何利用React和GoogleBigQuery结合起来构建快速的数据分析应用，并提供详细的代码示例。一、概述React是一个用于构建

See all articles