カスタムシェイプ

SpreadJSでは、特定のニーズに合わせたカスタムシェイプをワークシートに追加できます。シェイプモデルをカスタマイズすることで、キャンバスに絵を描くように、必要なシェイプを自由に描画できます。

次の図は、ワークシートにカスタムシェイプを追加した例を示します。

コードの使用

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

// カスタムシェイプをワークシートに追加します。window.onload = function (){
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();   // カスタムシェイプを作成するためのモデルを定義します。
   var model =    {
       left: 50,
       top: 50,
       width: 300,
       height: 300,
       options:       {
            fill:              {
                type: 1,
                color: "green",
                transparency: 0.5,
               },                    
             stroke:               {
                 type: 1, // 単色による塗りつぶしです（現時点では単色塗りつぶしのみがサポートされます）。
                 color: "blue",
                 width: 3                   
                }                    
          },
                path: [
                 [
                        ["M", 4, 1], // M: move to (x, y)
                        ["L", 104, 1], // L: line to (x, y)
                        ["L", 4, 94],
                        ["L", 104, 94],
                        ["L", 4, 1],
                        ["M", 4, 47],
                        ["L", 104, 47],
                        ["Z"]
                  ]
                ]
            };    // 定義したカスタムシェイプをシートに追加します。
    sheet.shapes.add('name', model);          
}

注意： SpreadJSでカスタムシェイプを使用する場合は、以下の点に注意してください。
現時点では、カスタムシェイプのExcelファイルに対するインポートおよびエクスポートはサポートされていません。
シェイプのテキストでサポートされる設定は、横書き文字、水平／垂直方向のテキスト配置、単色の塗りつぶし、フォント（名前とサイズ）、余白のみです。
現時点では、シェイプの反転（上下、左右、またはその両方）は完全にはサポートされていません。
「吹き出し」シェイプでは、HitTest機能が完全にサポートされません。このため、ユーザーが吹き出しの引き出し線の部分をクリックして「吹き出し」シェイプを選択することはできません。