概述
本 Demo 展示了如何创建区域快照并自定义其样式。Demo 中创建了一个产品销售表格，然后通过 addCameraShape 方法创建该表格区域的快照，并为快照设置了填充颜色、透明度、边框样式等视觉效果。
实现思路
创建工作表并准备基础数据（产品名称、价格、数量、销售额）
设置列宽、公式和格式化，构建完整的表格结构
使用 addCameraShape 方法创建区域快照，引用表格区域
通过 style() 方法获取形状样式对象
自定义形状的填充颜色、透明度、边框样式等属性
将修改后的样式应用到区域快照
代码解析
准备表格数据
这段代码创建了基础数据表格，设置了公式和表格样式，为区域快照提供数据源。
创建区域快照
addCameraShape 方法的参数说明：
name：快照形状的名称
range：引用的区域，格式为 "工作表名!区域范围"
left、top：快照在工作表中的位置（可选）
width、height：快照的尺寸（可选）
自定义区域快照样式
通过 style() 方法获取样式对象后，可以自定义：
fill：填充效果，包括颜色和透明度
line：边框效果，包括颜色、线型、宽度、端点样式、连接样式和透明度
运行效果
工作表左侧显示完整的产品销售表格
工作表右侧显示区域快照，实时反映表格内容和样式
快照带有粉色半透明填充和黑色点划线边框
修改表格数据时，快照会自动同步更新
API 参考
addCameraShape 方法
name：相机形状的名称，如果为空字符串将自动生成唯一名称
range：引用的区域字符串，格式为 "SheetName!A1:D7"
left、top：快照在工作表中的位置（可选）
width、height：快照的尺寸（可选）
返回值：CameraShape 对象
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.name("CameraShape");
prepareCellRangeData(sheet);
initShape(sheet);
}
function prepareCellRangeData(sheet){
sheet.setArray(0, 0, [
["Product", "Price", "Quantity", "Sales"],
['Kraft Real Mayo', 5.71, 1],
['Smartfood Popcorn', 2.5, 4],
['Teddy Grahams Crackers', 35, 5],
['Parmesan Cheese', 14.89, 9],
['Planter Deluxe Whole Cashew', 8.52, 3],
['Total']
]);
sheet.setColumnWidth(0, 190);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 100);
sheet.setColumnWidth(3, 100);
sheet.setFormula(1, 3, "B2*C2");
sheet.setFormula(2, 3, "B3*C3");
sheet.setFormula(3, 3, "B4*C4");
sheet.setFormula(4, 3, "B5*C5");
sheet.setFormula(5, 3, "B6*C6");
sheet.addCustomName('customName1', '=$B$2:$B$6', 0, 0);
sheet.addCustomName('customName2', '=$C$2:$C$6', 0, 0);
sheet.setFormula(6, 1, "=SUM(customName1)");
sheet.setFormula(6, 2, "=SUM(customName2)");
sheet.getRange(6, 0, 1, 4).foreColor('red');
sheet.setFormula(6, 3, "B7*C7");
sheet.getRange(-1,1,0,1).formatter("$ #,##0.00");
sheet.getRange(-1,3,0,1).formatter("$ #,##0.00");
var table = sheet.tables.add("table1", 0, 0, 7, 4, GC.Spread.Sheets.Tables.TableThemes.light7);
table.filterButtonVisible(false);
}
function initShape(sheet) {
var shape = sheet.shapes.addCameraShape("myCameraShape1", "CameraShape!A1:D7", 240, 200);
var shapeStyle = shape.style();
shapeStyle.fill.color = 'pink';
shapeStyle.fill.transparency = 0.8;
shapeStyle.line.color = 'black';
shapeStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot;
shapeStyle.line.width = 4;
shapeStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
shapeStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
shapeStyle.line.transparency = 0.1;
shape.style(shapeStyle);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="zh-cn" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js"
type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js"
type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
