社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
圖片平移
圖片縮放
車站標註
首頁 web前端 前端問答 react怎麼實現縮放

react怎麼實現縮放

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

react實作縮放的方法：1、監聽onWheel事件；2、設定事件物件event的屬性deltaY，當向上捲動時“deltaY0”；3、修改每次滾動時縮放的比例，同時更改transform樣式按比例進行縮放即可。

react怎麼實現縮放

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react怎麼實作縮放？

react圖片縮放、平移（position、transform實作）

很多網頁都會給文案附上一些圖片補充描述，例如在說到地址時，會在旁邊附上一張地圖，並在地圖上標註該地址。如果附上的圖片很小，很難看清楚地址的具體訊息，有些產品經理會為圖片設計一個可以平移、放大縮小的功能。本文將一一實現上述功能。

廢話不多說，先給上效果圖：

react怎麼實現縮放

主要三個功能點：

  • 圖片平移
  • 圖片縮放
  • 車站標註

圖片平移

圖片平移可以監聽這三個事件實現：onMouseDown、onMouseMove、onMouseUp 。
onMouseDown事件記錄每次滑鼠按下的座標位置；
onMouseMove事件計算出每次平移的距離，該距離加上拖曳前圖片距離父元素的距離就等於拖曳後圖片相對於父元素的距離；
onMouseUp事件觸發時，登出或不讓執行onMouseDown、onMouseMove事件，防止只要滑鼠移入圖片就會平移。

這三個事件需要阻止瀏覽器的預設行為，不然在移動時會自動開啟圖片。
react怎麼實現縮放

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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/987/470/885/1672193291310298.jpg"  class="lazy"  
        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樣式按比例進行縮放。

react怎麼實現縮放

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="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/524/801/658/1672193298348581.jpg"  class="lazy"  
        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",}
登入後複製

這裡，解釋一下原始圖的概念：
react怎麼實現縮放

隨便在網路上查看一個圖片元素，例如上面。 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);
登入後複製

react怎麼實現縮放

當圖片縮放時，圖示需要隨著圖片一起縮放。如果沒有設定圖示transformOrigin，預設時相對圖示的中心縮放的。為了確保圖示隨著圖片一起縮放，那就必須讓圖片和圖示的縮放參考原點相同，圖示的transformOrigin應該設定為相對於圖片原點的距離。 

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

react怎麼實現縮放

整體程式碼範例：

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脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
4 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前 By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
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信箱登陸入口在哪裡
7843
15
Java教學
1649
14
CakePHP 教程
1403
52
Laravel 教程
1300
25
PHP教程
1240
29
顯示更多
Related knowledge
React前後端分離指南：如何實作前後端的解耦與獨立部署 React前後端分離指南：如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南：如何實現前後端的解耦和獨立部署，需要具體程式碼範例在當今的Web開發環境中，前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開，可以讓開發工作更加靈活、高效，並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離，從而實現解耦和獨立部署的目標。首先，我們要先理解什麼是前後端分離。傳統的Web開發模式中，前端和後端是耦合在

如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言：現代化的應用程式需要支援可靠的訊息傳遞，以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫，用於建立使用者介面，而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用，並提供具體的程式碼範例。 RabbitMQ概述：

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

ReactRouter使用指南：如何實現前端路由控制隨著單頁應用的流行，前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫，提供了豐富的功能和易用的API，使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法，並提供一些具體的程式碼範例。安裝ReactRouter首先，我們需要

PHP、Vue和React：如何選擇最適合的前端框架？ PHP、Vue和React：如何選擇最適合的前端框架？ Mar 15, 2024 pm 05:48 PM

PHP、Vue和React：如何選擇最適合的前端框架？隨著互聯網技術的不斷發展，前端框架在Web開發中起著至關重要的作用。 PHP、Vue和React作為三種代表性的前端框架，每一種都具有其獨特的特徵和優勢。在選擇使用哪種前端框架時，開發人員需要根據專案需求、團隊技能和個人偏好做出明智的決策。本文將透過比較PHP、Vue和React這三種前端框架的特徵和使

Java框架與前端React框架的整合 Java框架與前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。

如何利用React開發一個響應式的後台管理系統 如何利用React開發一個響應式的後台管理系統 Sep 28, 2023 pm 04:55 PM

如何利用React開發一個響應式的後台管理系統隨著互聯網的快速發展，越來越多的企業和組織需要一個高效、靈活、易於管理的後台管理系統來處理日常的操作事務。 React作為目前最受歡迎的JavaScript庫之一，提供了一種簡潔、高效和可維護的方式來建立使用者介面。本文將介紹如何利用React開發一個響應式的後台管理系統，並給出具體的程式碼範例。建立React專案首先

vue.js vs.反應：特定於項目的考慮因素 vue.js vs.反應：特定於項目的考慮因素 Apr 09, 2025 am 12:01 AM

Vue.js適合中小型項目和快速迭代，React適用於大型複雜應用。 1)Vue.js易於上手，適用於團隊經驗不足或項目規模較小的情況。 2)React的生態系統更豐富，適合有高性能需求和復雜功能需求的項目。

react有哪些閉包 react有哪些閉包 Oct 27, 2023 pm 03:11 PM

react有事件處理函數、useEffect和useCallback、高階元件等等閉包。詳細介紹：1、事件處理函數閉包：在React中，當我們在元件中定義事件處理函數時，函數會形成一個閉包，可以存取元件作用域內的狀態和屬性。這樣可以在事件處理函數中使用元件的狀態和屬性，實現互動邏輯；2、useEffect和useCallback中的閉包等等。

See all articles