クラス: ShapeStyle

Sheets.Shapes.ShapeStyle

Table of contents

コンストラクタ

• constructor

プロパティ

• fill
• line
• textEffect
• textFrame

コンストラクタ

constructor

• new ShapeStyle(style?)

シェイプのスタイルを表します。

パラメータ

プロパティ

fill

• fill: IShapeFill | IShapeGradientFill | IShapePictureFill | IShapeTextureFill

塗りつぶしのオプションを示します。

プロパティ [type] - 塗りつぶしの種類。ShapeFillType列挙型または数式（=で始まる）です。

プロパティ [color] - 背景色。 色の文字列または数式（=で始まる）です。

プロパティ {number | string} [transparency] - 背景色の透明度。0～1の数値または数式(=で始まる)です。

実例

// 次のサンプルコードは、シェイプの背景色と背景色の透明度を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.fill = {
    type: GC.Spread.Sheets.Shapes.ShapeFillType.solid,
    color: "red",
    transparency: 0.5
};
heart.style(oldStyle);

// 次のサンプルコードは、シェイプのグラデーションの背景を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.fill = {
    type: GC.Spread.Sheets.Shapes.GradientFillType.linear,
    angle: 45,
    stops: [
        { color: 'blue', position: 0},
        { color: 'pink', position: 1}
    ]
};
heart.style(oldStyle);

// 次のサンプルコードは、シェイプの画像の背景を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.fill = { src: "data:image/svg+xml;base64....." };
heart.style(oldStyle);

// 次のサンプルコードは、シェイプの背景色と背景色の透明度を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
sheet.setValue(0, 1, 1);
sheet.setValue(1, 1, "red");
sheet.setValue(2, 1, 0.5);
var oldStyle = heart.style();
oldStyle.fill = {
    type: "=Sheet1!B1",
    color: "=Sheet1!B2",
    transparency: "=Sheet1!B3"
};
heart.style(oldStyle);

//　次のサンプルコードは、シェイプの数式を使用してグラデーションの背景を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.fill = {
    type: "=Sheet1!A1",
    angle: "=Sheet1!B1",
    stops: [
        { color: "=Sheet1!A2", position: "=Sheet1!B2"},
        { color: "=Sheet1!A3", position: "=Sheet1!B3"}
    ]
};
heart.style(oldStyle);

line

• line: IShapeLine

線のオプションを示します。

プロパティ [color] - 線の色。 色の文字列または数式（=で始まる）です。

プロパティ {GC.Spread.Sheets.Shapes.PresetLineDashStyle | string} [lineStyle] - 線のスタイル。PresetLineDashStyle 列挙体または数式 (=で始まる) です。

プロパティ {number | string} [width] - 線の幅。 数値または数式（=で始まる）です。

プロパティ {GC.Spread.Sheets.Shapes.LineCapStyle | string} [capType] - 線の先端形状のタイプ。LineCapStyle列挙型または数式（=で始まる）です。

プロパティ {GC.Spread.Sheets.Shapes.LineJoinStyle | string} [joinType] - 2本の交線のタイプ。LineJoinStyle列挙型または数式（=で始まる）です。

プロパティ {GC.Spread.Sheets.Shapes.CompoundType | string} [compoundType] - 複合線種。 これは、CompoundType列挙型または数式（=で始まる）です。

プロパティ {number | string} [transparency] - 線の色の透明度。 0〜1の数値または数式（=で始まる）です。

プロパティ [beginArrowheadStyle] - 線の始点にある矢印のスタイル。ArrowheadStyle列挙型です。

プロパティ [beginArrowheadWidth] - 線の始点にある矢印の幅。ArrowheadWidth列挙型です。

プロパティ [beginArrowheadLength] - 線の始点にある矢印の長さ。ArrowheadLength列挙型です。

プロパティ [endArrowheadStyle] - 線の先端にある矢印のスタイル。ArrowheadStyle列挙型です。

プロパティ [endArrowheadWidth] - 線の先端にある矢印の幅。ArrowheadWidth列挙型です。

プロパティ [endArrowheadLength] - 線の先端にある矢印の長さ。ArrowheadLength列挙型です。

実例

//　このサンプルコードは、シェイプの線の色、線のスタイル、線の幅、キャップの種類、結合の種類、および線の色の透明度を設定します。
var shape = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
//var shape = sheet.shapes.addConnector("Shape1", GC.Spread.Sheets.Shapes.ConnectorType.straight, 100, 60, 200, 160);
var oldStyle = shape.style();
oldStyle.line.color = "red";
oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot;
oldStyle.line.width = 5;
oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
oldStyle.line.compoundType = GC.Spread.Sheets.Shapes.CompoundType.double;
oldStyle.line.transparency = 0.5;
shape.style(oldStyle);

//　このサンプルコードは、シェイプ線の色、線のスタイル、線の幅、キャップの種類、結合の種類、および数式を使用した線の色の透明度を設定します。
var shape = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
//var shape = sheet.shapes.addConnector("Shape1", GC.Spread.Sheets.Shapes.ConnectorType.straight, 100, 60, 200, 160);
sheet.setValue(0, 1, "red");
sheet.setValue(1, 1, 4);
sheet.setValue(2, 1, 5);
sheet.setValue(3, 1, 1);
sheet.setValue(4, 1, 1);
sheet.setValue(5, 1, 0.5);
var oldStyle = shape.style();
oldStyle.line.color = "=Sheet1!B1";
oldStyle.line.lineStyle = "=Sheet1!B2";
oldStyle.line.width = "=Sheet1!B3";
oldStyle.line.capType = "=Sheet1!B4";
oldStyle.line.joinType = "=Sheet1!B5";
oldStyle.line.transparency = "=Sheet1!B6";
oldStyle.line.compoundType = "=Sheet1!B7";
shape.style(oldStyle);

//　このサンプルは、シェイプの線の開始矢印スタイル、幅、長さ、および終了矢印スタイル、幅、高さを設定します。
var shape = sheet.shapes.addConnector("Shape1", GC.Spread.Sheets.Shapes.ConnectorType.straight, 100, 60, 200, 160);
var oldStyle = shape.style();
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.wide;
oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.long;
shape.style(oldStyle);

textEffect

• textEffect: IShapeTextEffect

テキスト効果のオプションを示します。

プロパティ [color] - フォントの色。 色の文字列または数式（=で始まる）です。

プロパティ {number | string} [transparency] - フォントの色の透明度。 0〜1の数値または数式（=で始まる）です。

プロパティ [font] - フォント。 フォントの文字列または数式（=で始まる）です。

実例

// このサンプルコードは、シェイプのフォント、フォント色、フォント色の透明度を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.textEffect.color = "red";
oldStyle.textEffect.transparency = 0.5;
oldStyle.textEffect.font = "20px Arial";
heart.style(oldStyle);
heart.text("Heart");

// このサンプルコードは、形状のフォント色、フォント色の透明度、および数式を使用したフォントを設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
sheet.setValue(0, 1, "red");
sheet.setValue(1, 1, 0.5);
sheet.setValue(2, 1, "20px Arial");
var oldStyle = heart.style();
oldStyle.textEffect.color = "=Sheet1!B1";
oldStyle.textEffect.transparency = "=Sheet1!B2";
oldStyle.textEffect.font = "=Sheet1!B3";
heart.style(oldStyle);
heart.text("Heart");

textFrame

• textFrame: IShapeTextFrame

テキストフレームのオプションを示します。

プロパティ {GC.Spread.Sheets.VerticalAlign | string} [vAlign] - テキストの垂直方向の配置。VerticalAlign列挙型または数式（=で始まる）です。

プロパティ {GC.Spread.Sheets.HorizontalAlign | string} [hAlign] - テキストの水平方向の配置。HorizontalAlign列挙型または数式（=で始まる）です。

プロパティ [resizeToFitText] - テキストのサイズに合わせてシェイプのサイズを変更します。

実例

// 次のサンプルコードは、シェイプのテキストの垂直方向の配置および水平方向の配置を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
var oldStyle = heart.style();
oldStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
oldStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
heart.style(oldStyle);
heart.text("Heart");

// 次のサンプルコードは、数式を使用したシェイプのテキストの垂直方向の配置および水平方向の配置を設定します。
var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
sheet.setValue(0, 1, 1);
sheet.setValue(1, 1, 1);
var oldStyle = heart.style();
oldStyle.textFrame.vAlign = "=Sheet1!B1";
oldStyle.textFrame.hAlign = "=Sheet1!B2";
heart.style(oldStyle);
heart.text("Heart");

// 次のサンプルコードは、シェイプのresizeToFitText を設定します。
var rectangle = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 60, 200, 160);
var oldStyle = rectangle.style();
oldStyle.textFrame.resizeToFitText = true;
rectangle.style(style);