SpreadJS 文档
SpreadJS 文档 / 开发者指南 / JavaScript 框架 / 在React中使用SpreadJS / 形状标签
在本主题中
    形状标签
    在本主题中

    在SpreadJS和React中使用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模块

      接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react:

      npm install @grapecity/spread-sheets-react
             
    3. 将SpreadJS CSS导入index.js文件

      接下来,您需要使用以下代码将SpreadJS CSS导入index.js文件中:

      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
             
    4. 在项目中安装Shapes React模块

      接下来,您需要使用以下命令在项目中安装shapes模块:

      npm install @grapecity/spread-sheets-shapes
             
    5. 在React应用程序中使用形状

      现在,您可以根据需要修改App.js文件。 刷新浏览器窗口时,更改将反映出来。 例如,您可以使用下面给出的示例代码:

      这个例子展示了如何在React应用程序中使用形状。

      JavaScript
      复制代码

      import React from 'react';
      import './App.css';
      import GC from '@grapecity/spread-sheets';
      import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

      // 导入Shapes模块
      import '@grapecity/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;