Shape 요소

React에서 SpreadJS의 Shape 요소를 사용하면 사각형, 원, 직사각형, 삼각형, 오각형, 육각형, 팔각형 등 다양한 기하학적 도형을 워크시트에 손쉽게 삽입하고 렌더링할 수 있습니다.

1. React 프로젝트 생성하기

   명령 프롬프트 창을 열고 다음 명령어를 입력하세요:

   npm install -g create-react-app
   create-react-app quick-start
   cd quick-start
   npm start

   작업이 완료되면 지정한 위치에 React 프로젝트가 생성됩니다. React 프로젝트 생성 방법에 대한 자세한 내용은 https://reactjs.org/docs/create-a-new-react-app.html을 참조하세요.

2. 프로젝트에 SpreadJS React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 @mescius/spread-sheets-react를 설치하세요:

   npm install @mescius/spread-sheets-react

3. SpreadJS CSS 임포트하기

   다음 코드를 사용하여 index.js 파일에 SpreadJS CSS를 임포트하세요:

   import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

4. 프로젝트에 Shapes React 모듈 설치하기

   다음 명령어를 사용하여 프로젝트에 shapes 모듈을 설치하세요:

   npm install @mescius/spread-sheets-shapes

5. React 애플리케이션에서 Shapes 사용하기

   이제 필요에 따라 App.js 파일을 수정할 수 있습니다. 변경 사항은 브라우저 창을 새로 고침하면 반영됩니다. 예시로 아래 샘플 코드를 사용할 수 있습니다:

   
   

   이 예제는 React 애플리케이션에서 shapes를 사용하는 방법을 보여줍니다.

   import React from "react";
   import "./App.css";
   import GC from "@mescius/spread-sheets";
   import { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";
   
   // Shapes 모듈 임포트하기
   import "@mescius/spread-sheets-shapes";
   
   var SpreadJSKey = "xxx";
   GC.Spread.Sheets.LicenseKey = SpreadJSKey;
   
   class App extends React.Component {
     constructor(props) {
       super(props);
       this.hostStyle = {
         width: "1100px",
         height: "800px",
       };
     }
   
     // 워크북 초기화 이벤트 처리하기
     workbookInit = (spread) => {
       this.setState({
         spread: spread,
       });
   
       // 시트 가져오기
       let sheetShape = spread.getSheet(0);
   
       // 시트 이름 설정하기
       sheetShape.name("Shapes");
       sheetShape.suspendPaint();
   
       // 내장 도형 "도넛" 추가하기
       var donutShape = sheetShape.shapes.add(
         "autoShape",
         GC.Spread.Sheets.Shapes.AutoShapeType.donut,
         50,
         50,
         150,
         150
       );
   
       // 내장 도형 "도넛"에 텍스트 추가하기
       donutShape.text("Donut Shape");
   
       // 내장 도형 "도넛"에 스타일 추가하기
       var shapeStyle = donutShape.style();
       shapeStyle.textEffect.color = "Red";
       shapeStyle.textEffect.font = "18px Arial";
       shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
       shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
       donutShape.style(shapeStyle);
   
       sheetShape.resumePaint();
     };
     render() {
       return (
         <div>
           <SpreadSheets
             backColor={this.spreadBackColor}
             hostStyle={this.hostStyle}
             workbookInitialized={this.workbookInit}
           >
             <Worksheet></Worksheet>
           </SpreadSheets>
         </div>
       );
     }
   }
   
   export default App;