形状

SpreadJS支持在工作表中添加内置形状、自定义形状、连接符形状和相机形状。这些形状可用于增强数据可视化效果，并与单元格中的信息进行交互。

你可以在形状中添加文本和超链接，设置形状的布局格式，并应用不同的形状样式，如填充颜色、字体大小、水平和垂直对齐方式、边框颜色和线条宽度等。你可以通过旋转或调整形状大小来自定义形状属性；为连接符形状定义并添加连接点，以及自定义形状的边框。

以下类型的形状可应用于SpreadJS工作表。点击图片可访问相应主题：

形状类型	图片	描述
内置形状		从工作表中可用的不同类型的内置形状和几何图形（如正方形和圆形）中进行选择。
连接器形状		使用工作表中不同的线条、箭头和连接点连接两个或多个形状，以创建独特的形状和模型，如流程图。
自定义形状		根据特定需求在工作表中添加自定义形状，并自定义形状模型以绘制和可视化图表。
照相机形状		添加一个动态图像，该图像会反映引用区域的任何更改，以帮助在工作表中创建有用的交互式仪表板。
图片形状		使用PictureShape类将图片作为形状添加，这样图片也将支持形状格式化选项。

SpreadJS支持对形状进行各种操作，不仅能让你的工作表具有美观的外观，还能使其看起来非常专业。

功能	描述
组合形状	在工作表中组合和取消组合形状。
形状属性公式	在工作表中添加带有公式的内置形状和自定义形状。
形状属性链接	通过公式中的引用将形状的属性绑定到工作表单元格。
格式化形状	在形状中添加不同类型的复合线条。
填充效果	在形状中添加填充效果以增强其外观。
形状中的文本	在形状中添加和编辑文本。
形状中的超链接	在形状上添加超链接。
排列形状	使用形状对齐选项、分布选项或在使用多个形状时将它们与其他形状或网格对齐来调整形状位置。

注意： 要在工作表中集成形状，需要引用gc.spread.sheets.shapes...*.js脚本文件。

设置形状控制柄的可见性

当点击一个形状时，形状控制柄默认会显示。它们允许你调整形状大小、旋转或调整形状。不过，你可以通过将showHandle方法设置为false（默认值为true）来隐藏形状控制柄。

此选项在调整形状大小时提供更简洁的视图，并隐藏所有控制柄。你仍然可以通过点击并拖动来选择和移动形状。

有控制柄（左） | 无控制柄（右）

shape-handle

$(document).ready(function () {
    // 初始化Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // 获取活动工作表
    var activeSheet = spread.getSheet(0);
    // 向活动工作表添加心形形状
    heart = activeSheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
    // 禁用形状的控制柄显示
    heart.showHandle(false);
});

同样，你也可以通过将allowRotate方法设置为false（默认值为true）来禁用形状的旋转控制柄。要禁用连接符形状的旋转功能，可以将allowResize设置为false。

shapeHandleRotate

var oval;
$(document).ready(function () {
    // 初始化Spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // 获取活动工作表
    var activeSheet = spread.getSheet(0);
    // 向活动工作表添加椭圆形形状
    oval = activeSheet.shapes.add('Shape1', GC.Spread.Sheets.Shapes.AutoShapeType.oval, 100, 60, 200, 160);
    // 将allowRotate设置为false
    oval.allowRotate(false);
});

// 使用代码更改形状角度的函数
function myFunction() {
    var x = document.getElementById('input').value;
    // x是形状旋转的角度
    oval.rotate(x);
}