SpreadJS製品ヘルプ
コネクタシェイプ
SpreadJS > 開発者の手引き > 機能 > データ視覚化とオブジェクトの管理 > シェイプ > コネクタシェイプ

コネクタシェイプを使用すると、さまざまな線、矢印、接続点を使用して、複数のシェイプを接続できます。Spread.Sheetsでは、ワークシートへのコネクタシェイプの追加とカスタマイズが、拡張的にサポートされます。

ワークシートにコネクタシェイプを追加する場合は、線(矢印なし)、基本矢印(双方向矢印)、開いた矢印、鋭い矢印、円形矢印、ひし型矢印といった、多様な矢印を使用できます。

通常、コネクタシェイプには次の2種類があります。

  1. 線コネクタシェイプ:直線型のコネクタを使用して、複数のシェイプを接続するシェイプです。
  2. カギ線コネクタシェイプ:屈曲したカギ線型のコネクタを使用して、複数のシェイプを接続するシェイプです。

次の図は、長方形と円を矢印でつなぐコネクタシェイプを示します。

コードの使用

次のサンプルコードは、ワークシートにコネクタシェイプを追加します。

JavaScript
コードのコピー

// コネクタシェイプをワークシートに追加します。

       

 window.onload = function ()

{
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();          

   // コネクタシェイプでつなぐ2つのシェイプを追加します。
   var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 150, 100, 100, 100);            
   var shape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 700, 100, 100, 100);

   // 上記で定義した2つのシェイプをつなぐコネクタシェイプを追加します。
   var connectorShape = sheet.shapes.addConnector("myConnectorShape", GC.Spread.Sheets.Shapes.ConnectorType.straight, 250, 150, 700, 150);

   // コネクタシェイプのスタイルを設定します。
   var oldStyle = connectorShape.style();
   oldStyle.line.color = 'red';
   oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dot;
   oldStyle.line.width = 10;
   oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
   oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
   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.triangle;
   oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium;
   oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium;
   connectorShape.style(oldStyle);

  // コネクタシェイプのstartConnectorを設定します。
   var startConnector = connectorShape.startConnector();
   connectorShape.startConnector({ name: shape1.name(), index: 3 });
   

   // コネクタシェイプのendConnectorを設定します。
   var endConnector = connectorShape.endConnector();
   connectorShape.endConnector({ name: shape2.name(), index: 2 });
};

 

注意:Spread.Sheetsでコネクタシェイプを統合する場合は、以下の点に注意してください。