たとえば、次のコードを使用すると、組み込みシェイプの背景色を変更できます。
window.onload = function() {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initBuildShapeFormula(spread);
initCustomShapeFormula(spread);
};
function initBuildShapeFormula(spread) {
var sheet = spread.getSheet(0);
sheet.name("BuildInShape");
sheet.setArray(0, 0, [
["x", 10],
["y", 200],
["width", 400],
["height", 240],
["angle", 0],
["background color and tranparency", "green", 0.5],
["border color and width", "blue", 5],
["shape text", "The demo text for custom shape"],
["text font", "15px Georgia"],
["text color", "red"],
]);
sheet.setColumnWidth(0, 280);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 70);
sheet.setColumnWidth(3, 70);
sheet.setColumnWidth(4, 70);
sheet.setColumnWidth(5, 70);;
var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 50, 100, 150);
shape1.setFormula("x", "=BuildInShape!B1");
shape1.setFormula("y", "=BuildInShape!B2");
shape1.setFormula("width", "=BuildInShape!B3");
shape1.setFormula("height", "=BuildInShape!B4");
shape1.setFormula("rotate", "=BuildInShape!B5");
shape1.setFormula("text", "=BuildInShape!B8");
shape1.setFormula("style.fill.color", "=BuildInShape!B6");
shape1.setFormula("style.fill.transparency", "=BuildInShape!C6");
shape1.setFormula("style.line.color", "=BuildInShape!B7");
shape1.setFormula("style.line.width", "=BuildInShape!C7");
shape1.setFormula("style.textEffect.font", "=BuildInShape!B9");
shape1.setFormula("style.textEffect.color", "=BuildInShape!B10");
}
function createComboCellType(enumType, max) {
var combo = new GC.Spread.Sheets.CellTypes.ComboBox();
var items = [];
for (var name in enumType) {
var value = enumType[name];
if (!max || value <= max) {
items.push({
text: name,
value: value
});
}
}
combo.items(items);
combo.editorValueType(GC.Spread.Sheets.CellTypes.EditorValueType.value);
return combo;
}
function initCustomShapeFormula(spread) {
var sheet = spread.getSheet(1);
sheet.name("CustomShape");
sheet.setArray(0, 0, [
["left", 480],
["top", 60],
["width", 400],
["height", 240],
["angle"],
["background color and tranparency", "green", 0.5],
["border color and width", "blue", 0],
["shape text", "The demo text for custom shape"],
["text font", "15px Georgia"],
["text color", "red"],
["margins", 1, 2, 3, 4],
["horizontalAlignment", 1],
["verticalAlignment", 1],
["textDirection", "horizontal"],
["allowTextToOverflowShape", false],
["wrapTextInShape", true],
["line width", 3],
["line style", 5, "capType", 2, "joinType", 1],
["endPoints", 1, 1, 1, 5, 2, 2],
]);
sheet.setColumnWidth(0, 280);
sheet.setColumnWidth(1, 100);
sheet.setColumnWidth(2, 70);
sheet.setColumnWidth(3, 70);
sheet.setColumnWidth(4, 70);
sheet.setColumnWidth(5, 70);
sheet.setCellType(11, 1, createComboCellType(GC.Spread.Sheets.HorizontalAlign, 3));
sheet.setCellType(12, 1, createComboCellType(GC.Spread.Sheets.VerticalAlign,2));
sheet.setCellType(17, 1, createComboCellType(GC.Spread.Sheets.Shapes.PresetLineDashStyle,10));
sheet.setCellType(17, 3, createComboCellType(GC.Spread.Sheets.Shapes.LineCapStyle,2));
sheet.setCellType(17, 5, createComboCellType(GC.Spread.Sheets.Shapes.LineJoinStyle,2));
sheet.setCellType(18, 1, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadStyle,5));
sheet.setCellType(18, 4, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadStyle,5));
sheet.setCellType(18, 2, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadLength,2));
sheet.setCellType(18, 5, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadLength,2));
sheet.setCellType(18, 3, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadWidth,2));
sheet.setCellType(18, 6, createComboCellType(GC.Spread.Sheets.Shapes.ArrowheadWidth,2));
sheet.setFormula(4, 1, "=ROW(CustomShape!B10)");
var model = {
left: "=CustomShape!B1",
top: "=CustomShape!B2",
width: "=CustomShape!B3",
height: "=CustomShape!B4",
angle: "=CustomShape!B5", //"=ROW(BuildInShape!B10)",
options: {
endPoints: {
beginArrow: {
type: "=CustomShape!B19", widthType: "=CustomShape!C19", lengthType: "=CustomShape!D19" },
endArrow: { type: "=CustomShape!E19", widthType: "=CustomShape!F19", lengthType: "=CustomShape!G19" }
},
fill: {
type: 1, // solid fill (now only support solid fill)
color: "=CustomShape!B6",
transparency: "=CustomShape!C6"
},
stroke: {
type: 1, // solid fill (now only support solid fill)
color: "=CustomShape!B7",
transparency: "=CustomShape!C7",
width: "=CustomShape!B17",
lineStyle: "=CustomShape!B18",
capType: "=CustomShape!D18",
joinType: "=CustomShape!F18"
},
textFormatOptions: {
text: "=CustomShape!B8", // "Shape Text",
font: "=CustomShape!B9", // "bold 15px Georgia", // css font, zoom related code should be update to support it
fill: {
type: 1, // solid fill (now only support solid fill)
color: "=CustomShape!B10"
},
margins: {
left: "=CustomShape!B11",
top: "=CustomShape!C11",
right: "=CustomShape!D11",
bottom: "=CustomShape!E11"
},
verticalAlignment: "=CustomShape!B13", // (0: top, 1: center, 2: bottom)
horizontalAlignment: "=CustomShape!B12", // (0: left, 1: center, 2: right)
textDirection: "=CustomShape!B14", //f "vertical", "rotate90", "rotate270"
allowTextToOverflowShape: "=CustomShape!B15",
wrapTextInShape: "=CustomShape!B16"
}
},
variables: {
xOffset: 40,
yOffset: 10
},
path: [[
["M", "=controls.0.x", 0], // M: move to (x, y)
["L", "=width - controls.0.x", 0], // L: line to (x, y)
["L", "=width - 2 * variables.xOffset", "=height"], ["L", "=variables.xOffset", "=height"],
["Z"]], // Z: close path
[
["M", "=width - variables.xOffset", "=variables.yOffset"],
["L", "=width", "=variables.yOffset"],
["L", "=width", "=height - 4 * variables.yOffset"],
["L", "=width - variables.xOffset", "=height"]
]
],
controls: [
{
x: "=BOUND(0.3*width, 0, false, 0, 0.5*width)", // formula used to provide position and range limitation (here default at position (0, 0.2 * width), and the y range from 0 to 0.5*width)
y: 0,
xBehavior: 0, // 0 if adjust in x (horizontal), otherwise 1
yBehavior: 1 // 0 if adjust in y (vertical), otherwise 1
}
],
connectionPoints: [
{
x: "=0.5*width",
y: 0
},
{
x: "=0.5*controls.0.x",
y: "=0.5*height"
},
{
x: "=0.5*width",
y: "=1*height"
},
{
x: "=width-0.5*controls.0.x",
y: "=0.5*height"
}
],
textRect: {left: "=controls.0.x", top: 20, bottom: "=height - 20", right: "=width - variables.xOffset" }
};
sheet.shapes.add('shape2', model);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.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 class="options-container">
<div class="option-row">
Spreadシートのデータを編集して、シェイプのプロパティがどのように変更されるかを確認してください。
</div>
</div>
</div></body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 5px;
}
