Shape元素

在SpreadJS和React中使用Shape元素，您可以在表单中快速嵌入和渲染各种形状，包括正方形，圆形，矩形，三角形，五边形，六边形，八边形等几何图形，而无需麻烦。

• 创建一个React项目 打开命令提示符窗口，然后键入以下命令： 完成后，将在目录中的指定位置创建react项目。 有关如何创建一个React项目的更多信息，请参阅https://reactjs.org/docs/create-a-new-react-app.html.
• 在项目中安装SpreadJS React模块 接下来，您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react：
• 将SpreadJS CSS导入index.js文件 接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：
• 在项目中安装Shapes React模块 接下来，您需要使用以下命令在项目中安装shapes模块：
• 在React应用程序中使用形状 现在，您可以根据需要修改App.js文件。 刷新浏览器窗口时，变更将反映出来。 例如，您可以使用下面给出的示例代码： 这个例子展示了如何在React应用程序中使用形状。

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;