React JS 中的 SVG 放大和缩小

Z时代
2024-01-10
分类：综合

在本文中，我们将了解如何在 React JS 中缩放 SVG 图像。在某些情况下它真的很有用。我们将使用react-svg-pan-zoom包创建一个可以放大或旋转 SVG 图像的功能。

首先创建一个 React 项目 -

npx create-react-app tutorialpurpose

转到项目目录 -

cd tutorialpurpose

示例

安装react-svg-pan-zoom包 -

npm i --save react-svg-pan-zoom

这个包将允许我们实现一个可以放大和缩小甚至旋转图像的区域。

在App.js中添加以下代码行-

import React, { useRef, useEffect } from "react";
import { UncontrolledReactSVGPanZoom } from "react-svg-panzoom";
export default function App() {
   const Viewer = useRef(null);
   useEffect(() => {
      Viewer.current.fitToViewer();
   }, []);
   const _zoomOnViewerCenter = () =>
   Viewer.current.zoomOnViewerCenter(1.1);
   const _fitSelection = () => Viewer.current.fitSelection(40,40, 200, 200);
   const _fitToViewer = () => Viewer.current.fitToViewer();
   return (
       <div>
         <h1>UncontrolledReactSVGPanZoom</h1>
         <hr />
         <button className="btn" onClick={() =>_zoomOnViewerCenter()}>Zoom on center
         </button>
         <button className="btn" onClick={() =>_fitSelection()}> Zoom area 200x200
         </button>
         <button className="btn" onClick={() => _fitToViewer()}> Fit
         </button>
         <hr />
         <UncontrolledReactSVGPanZoom ref={Viewer} width={500} height={500}>
            <svg width={617} height={316}>
               <g fillOpacity=".5" strokeWidth="4">
                  <rectx="400"
                     y="40"
                     width="100"
                     height="200"
                     fill="#4286f4"
                     stroke="#f4f142"
                    />
                  </g>
                </svg>
           </UncontrolledReactSVGPanZoom>
      </div>
   );
}