SpreadJS製品ヘルプ
カスタムシェイプ
機能 > シェイプ > カスタムシェイプ

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

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

コードの使用

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

JavaScript
コードのコピー

// カスタムシェイプをワークシートに追加します。

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);          

 

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