コネクタシェイプ

SpreadJSでは、異なるシェイプまたはアイテム間の接続を作成できる2種類のコネクタシェイプを提供します。 以下は、ブックに追加できるさまざまなコネクタシェイプを示しています。

<p>Spread.Sheetsには、2種類のコネクタシェイプがあります。</p> <ul> <li><strong>Straight</strong></li> <li><strong>Elbow</strong></li> </ul> <p>コネクタシェイプ(線)は単独で使用することも、他のシェイプと接続して使用することもできます。コネクタシェイプの両端には、独自の矢印を設定できます。</p> <p>コネクタシェイプのスタイルを変更するには、追加したコネクタシェイプに対し、ConnectorShape APIを使用してカスタマイズします。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> shape1 = sheet.shapes.add(<span class="hljs-string">"myShape1"</span>, GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, <span class="hljs-number">62</span> * <span class="hljs-number">9</span>, <span class="hljs-number">0</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>) <span class="hljs-keyword">var</span> shape2 = sheet.shapes.addConnector(<span class="hljs-string">"myShape2"</span>, GC.Spread.Sheets.Shapes.ConnectorType.straight, <span class="hljs-number">220</span>, <span class="hljs-number">120</span>, <span class="hljs-number">300</span>, <span class="hljs-number">120</span>); <span class="hljs-keyword">var</span> oldStyle = shape2.style(); oldStyle.line.color = <span class="hljs-string">'red'</span>; oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; oldStyle.line.width = <span class="hljs-number">10</span>; oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; oldStyle.line.transparency = <span class="hljs-number">0.5</span>; oldStyle.line.beginArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle; oldStyle.line.beginArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.narrow; oldStyle.line.beginArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.short; oldStyle.line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.diamond; oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium; oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium; shape2.style(oldStyle); <span class="hljs-keyword">var</span> startConnector = shape2.startConnector(); shape2.startConnector({<span class="hljs-attr">name</span>: shape1.name(), <span class="hljs-attr">index</span>: <span class="hljs-number">2</span>}); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var shapeData = [ { type: 'straight', }, { type: 'straight', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } }, { type: 'straight', beginArrowhead: { style: "stealth", width: 'wide', length: 'wide', } }, { beginArrowhead: { style: "stealth", width: 'medium', length: 'medium', }, type: 'straight', endArrowhead: { style: "diamond", width: 'wide', length: 'wide', } }, { type: 'elbow', }, { type: 'elbow', endArrowhead: { style: "oval", width: 'medium', length: 'medium', }, }, { type: 'elbow', beginArrowhead: { style: "oval", width: 'wide', length: 'wide', }, }, { beginArrowhead: { style: "open", width: 'medium', length: 'medium', }, type: 'elbow', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } } ]; spread.suspendPaint(); var sheet = spread.getSheet(0); sheet.name("ConnectorShape"); for (var i = 0; i < shapeData.length; i++) { initShape(sheet, shapeData[i], i);//add connectorShape } sheet.setValue(1, 4, 'stright'); sheet.setValue(1, 10, 'elbow'); spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initShape(sheet, shapeData,index) { var colors = ["red", "blue", "black", "pink", "green", "orange"]; var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; var beginX = 200,endX = 400; if(shapeData.type === 'elbow'){ beginX = 550; endX = 750; index = index%4; } var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 120+index*70, endX, 80+index*70); if (shapeData.beginArrowhead !== undefined) { var connectorBeginStyle = connectorShape.style(); var beginLine = connectorBeginStyle.line; beginLine.beginArrowheadStyle = arrowheadStyle[shapeData.beginArrowhead.style]; beginLine.beginArrowheadWidth = arrowheadWidth[shapeData.beginArrowhead.width]; beginLine.beginArrowheadLength = arrowheadLength[shapeData.beginArrowhead.length]; connectorShape.style(connectorBeginStyle); } if (shapeData.endArrowhead !== undefined) { var connectorEndStyle = connectorShape.style(); var endLine = connectorEndStyle.line; endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style]; endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width]; endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length]; connectorShape.style(connectorEndStyle); } var connectorStyle = connectorShape.style(); var lineTemp = connectorStyle.line; lineTemp.width = 5; lineTemp.color = colors[index]; connectorShape.style(connectorStyle); }
<!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></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; }