ピクチャシェイプ

SpreadJS では、ピクチャをシェイプとして追加および書式設定することができます。

ピクチャオブジェクトは、ShapeBase クラスを使用して作成され、シェイプのプロパティを継承します。この機能は、ピクチャを書式設定して、他のシェイプとあわせて利用するのに役立ちます。

addPictureShape メソッドを使用して、ピクチャシェイプを追加できます。このメソッドは、名前、ソース、場所（x と y）、サイズ（幅と高さ）などのパラメータを受け取ります。

JavaScript	コードのコピー
// ワークブックとワークシートを構成します。 var spread = new GC.Spread.Sheets.Workbook("ss"); var sheet = spread.getActiveSheet(); // ピクチャをシェイプとして追加します。 var originalPic = sheet.shapes.addPictureShape("Apple", '/apple.png', 20, 50, 200, 200);

JavaScript

コードのコピー

// ワークブックとワークシートを構成します。
var spread = new GC.Spread.Sheets.Workbook("ss");
var sheet = spread.getActiveSheet();

// ピクチャをシェイプとして追加します。
var originalPic = sheet.shapes.addPictureShape("Apple", '/apple.png', 20, 50, 200, 200);

PictureShape クラスは、ピクチャシェイプの外観を制御するためのさまざまなメソッドを提供します。例えば、次の図は、円型のシェイプの形に切り抜いた画像を、回転して表示する方法を示します。

JavaScript	コードのコピー
var pic = sheet.shapes.addPictureShape("Apple", '/apple.png', 280, 60, 200, 200); // スタイルを設定します。 var style = pic.style(); style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid; style.fill.color = 'rgb(14, 242, 200)'; style.line.color = 'rgb(255, 204, 0)'; style.line.width = 3; pic.style(style); // 円型のシェイプの形に切り抜きます。 pic.geometryType(GC.Spread.Sheets.Shapes.AutoShapeType.oval); // ピクチャを回転します。 var n = pic.rotate(); pic.rotate(n + 30);

JavaScript

コードのコピー

var pic = sheet.shapes.addPictureShape("Apple", '/apple.png', 280, 60, 200, 200);

// スタイルを設定します。
var style = pic.style();
style.fill.type = GC.Spread.Sheets.Shapes.ShapeFillType.solid;
style.fill.color = 'rgb(14, 242, 200)';
style.line.color = 'rgb(255, 204, 0)';
style.line.width = 3;
pic.style(style);

// 円型のシェイプの形に切り抜きます。
pic.geometryType(GC.Spread.Sheets.Shapes.AutoShapeType.oval);

// ピクチャを回転します。
var n = pic.rotate();
pic.rotate(n + 30);

メモ: ワークシートに画像ファイルをコピーして貼り付けると、デフォルトでピクチャシェイプが作成されます。ピクチャシェイプを作成するときにシェイププラグインを追加する必要があります。そうでない場合は、ピクチャシェイプの代わりにフローティングオブジェクトの画像が作成されます。

ピクチャの書式設定

ピクチャシェイプを書式設定するのに多くの書式設定オプションが用意されます。 pictureFormat メソッドでは、次のオプションを使用して書式設定配列を設定できます。

オプション	説明	例
blackAndWhite	バイレベル効果を指定します。値の範囲は [0, 1] です。輝度がしきい値以上の場合、白に設定されます。輝度がしきい値以下の場合、黒に設定されます。
brightness	ピクチャの明るさを調整します。値の範囲は [-1, 1] です。すべての色を直線的に白（最も明るい）または黒（最も暗い）に設定します。	< td>
contrast	ピクチャのコントラストを調整します。値の範囲は [-1, 1] です。
crop	塗りつぶしに使用する画像の部分を指定します。
duotone	ダブルトーン効果を指定します。線形補間によって color1 と color2 を組み合わせて、各ピクセルの新しい色を決定します。
transparency	透明度を調整します。値の範囲は [0, 1] です。
grayscale	グレースケールを適用するかどうかを指定します。デフォルト値は false です。影響を受けるすべての色値を、それらの輝度に対応するグレー色に変換します。

次のサンプルコードは、各書式設定オプションをピクチャシェイプに適用する方法を示します。

JavaScript	コードのコピー
// 白黒を設定します。 pic.pictureFormat({ blackAndWhite: 0.5 }); // 明るさとコントラストを設定します。 var format = pic.pictureFormat(); format.brightness = 0.4; format.contrast = 0.4; pic.pictureFormat(format); // トリミングを設定します。 var format = pic.pictureFormat(); format.crop = { left: -.015, right: -0.15, top: -0.15, bottom: -0.15 }; pic.pictureFormat(format); // ダブルトーンを設定します。 pic.pictureFormat({ duotone: { color1: "black", color2: "red" } }); // 透明度を設定します。 var format = pic.pictureFormat(); format.transparency = 0.5; pic.pictureFormat(format); // グレースケールを設定します。 pic.pictureFormat({ grayscale: true });

JavaScript

コードのコピー

// 白黒を設定します。
pic.pictureFormat({ blackAndWhite: 0.5 });  
// 明るさとコントラストを設定します。
var format = pic.pictureFormat();
format.brightness = 0.4;
format.contrast = 0.4;
pic.pictureFormat(format);
// トリミングを設定します。
var format = pic.pictureFormat();
format.crop = { left: -.015, right: -0.15, top: -0.15, bottom: -0.15 };
pic.pictureFormat(format);
// ダブルトーンを設定します。
pic.pictureFormat({ duotone: { color1: "black", color2: "red" } });
// 透明度を設定します。
var format = pic.pictureFormat();
format.transparency = 0.5;
pic.pictureFormat(format);
// グレースケールを設定します。
pic.pictureFormat({ grayscale: true });