GR-PEACH グラフィックスモジュール (graphics)

graphics モジュールは、フレームバッファへのグラフィックスの描画を行います。

new Graphics(config)

• config {Object} グラフィックスの描画を行うフレームバッファの設定
  • buf {AlignedBuffer} フレームバッファとして使用するバッファ。必須項目です。
  • width {number} フレームバッファの横幅(ピクセル数)。必須項目です。
  • height {number} フレームバッファの高さ(ピクセル数)。必須項目です。
  • format {string} フレームバッファのピクセルフォーマット。"rgb565", "rgb888", "argb8888", "argb4444"のいずれかが指定できます。必須項目です。
• 戻り値: {Object} Graphicsクラスのインスタンス

グラフィックスの描画を行うフレームバッファの設定を行います。処理は同期で行われ、処理が完了するとGraphicsクラスのインスタンスを返却します。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;
var display = require('display');

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  /* グラフィックス描画... */

  /* グラフィックスをLCDに表示 */
  var lcd = display.openLCDSync({ type: '4.3inch' });
  lcd.startSync(0, graphics.frameBuffer, 'rgb565');
} catch (err) {
  console.log(err);
}

Graphicsクラス

フレームバッファへのグラフィックスの描画を行うクラスです。

本クラスで使用する色データは、new Graphics()のconfig.formatで指定したフォーマットの1ピクセル当たりのデータをnumberで指定します。 各フォーマットに対して、色データの各ビットの対応関係は以下のようになります。

"rgb565"　 : 0bRRRRRGGGGGGBBBBB
"argb4444" : 0bAAAARRRRGGGGBBBB
"rgb888"　 : 0bXXXXXXXXRRRRRRRRGGGGGGGGBBBBBBBB(Xのビットの値は無効)
"argb8888" : 0bAAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

graphics.frameBuffer

• {AlignedBuffer}
• 描画対象のフレームバッファを示すプロパティです。new Graphics()のconfig.bufに指定した値が得られます。

graphics.bufferWidth

• {number}
• フレームバッファの横幅(ピクセル数)を示す、読み取り専用プロパティです。new Graphics()のconfig.widthに指定した値が得られます。

graphics.bufferHeight

• {number}
• フレームバッファの高さ(ピクセル数)を示す、読み取り専用プロパティです。new Graphics()のconfig.heightに指定した値が得られます。

graphics.bufferFormat

• {string}
• フレームバッファのピクセルフォーマットを示す、読み取り専用プロパティです。new Graphics()のconfig.formatに指定した値が得られます。

graphics.drawImage(image, x, y)

• image {Object} 転送元の画像データ
  • width {number} 画像の幅(ピクセル数)。
  • height {number} 画像の高さ(ピクセル数)
  • bitmap {AlignedBuffer} 画素データ。ピクセルフォーマットはgraphics.bufferFormatと一致している必要があります。
• x {number} 転送先の左上X座標 (省略時: 0)
• y {number} 転送先の左上Y座標 (省略時: 0)
• 戻り値: {undefined}

画像をフレームバッファに転送(コピー)します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

指定された各座標やサイズがフレームバッファのサイズを超える場合、サイズ内の範囲に切り詰められます。切り詰めた結果、転送する領域の横幅や高さが0以下となった場合は、転送を行わずに成功扱いで終了します。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;
var jpeg = require('jpeg');
var fs = require('fs');

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  var jpegData = fs.readFileSync('/sd/input.jpg');
  var buf = new AlignedBuffer(jpegData, 32);
  var image = jpeg.decodeSync(buf, {width:480, height:272, format:'rgb565'});
  graphics.drawImage(image, 0, 0);
} catch (err) {
  console.log(err);
}

graphics.drawLine(startX, startY, endX, endY, color)

• startX {number} 線の始点のX座標
• startY {number} 線の始点のY座標
• endX {number} 線の終点のX座標
• endY {number} 線の終点のY座標
• color {number} 線の色
• 戻り値: {undefined}

フレームバッファに線を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawLine(0, 0, 480, 272, 0xF800); /* 赤の線を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawRect(x, y, width, height, color, fill)

• x {number} 矩形の左上X座標
• y {number} 矩形の左上Y座標
• width {number} 矩形の幅
• height {number} 矩形の高さ
• color {number} 矩形の色
• fill {boolean} true:塗りつぶしあり, false:塗りつぶしなし
• 戻り値: {undefined}

フレームバッファに矩形を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawRect(100, 100, 100, 100, 0x0000, false); /* 黒の矩形を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawArc(centerX, centerY, radius, startAngle, endAngle, color)

• centerX {number} 弧の中心点のX座標
• centerY {number} 弧の中心点のY座標
• radius {number} 弧の半径
• startAngle {number} 弧の始点の角度
• endAngle {number} 弧の終点の角度
• color {number} 弧の色
• 戻り値: {undefined}

フレームバッファに弧を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawArc(100, 100, 100, 0, 180, 0x07E0); /* 緑の半円を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawCircle(centerX, centerY, radius, color, fill)

• centerX {number} 円の中心点のX座標
• centerY {number} 円の中心点のY座標
• radius {number} 円の半径
• color {number} 円の色
• fill {boolean} true:塗りつぶしあり, false:塗りつぶしなし
• 戻り値: {undefined}

フレームバッファに円を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawCircle(100, 100, 100, 0x001F, true); /* 青の円を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawEllipse(centerX, centerY, radiusX, radiusY, color, fill)

• centerX {number} 楕円の中心点のX座標
• centerY {number} 楕円の中心点のY座標
• radiusX {number} 楕円のX方向の半径
• radiusY {number} 楕円のY方向の半径
• color {number} 楕円の色
• fill {boolean} true:塗りつぶしあり, false:塗りつぶしなし
• 戻り値: {undefined}

フレームバッファに楕円を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawEllipse(100, 100, 100, 50, 0x0000, true); /* 黒の楕円を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawPolygon(centerX, centerY, radius, sides, color, fill)

• centerX {number} 正多角形の中心点のX座標
• centerY {number} 正多角形の中心点のY座標
• radius {number} 正多角形の中心点と頂点の距離（外接円の半径）
• sides {number} 正多角形の辺の数
• color {number} 正多角形の色
• fill {boolean} true:塗りつぶしあり, false:塗りつぶしなし
• 戻り値: {undefined}

フレームバッファに正多角形を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0x0000, true); /* 背景を黒で塗りつぶす */
  graphics.drawPolygon(100, 100, 100, 3, 0xFFFF, true); /* 白の三角形を描画 */
} catch (err) {
  console.log(err);
}

graphics.drawText(text, x, y, size, color, background)

• text {string} 描画する文字列。Ascii文字のみ対応しています。
• x {number} 文字列のX座標
• y {number} 文字列のY座標
• size {number} 文字列のフォントサイズ。描画される文字は、幅size×6ピクセル、高さsize×8ピクセルになります。
• color {number} 文字列の色
• background {number} 文字列の背景の色
• 戻り値: {undefined}

フレームバッファに文字列を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。

使用例

var Graphics = require('graphics').Graphics;
var AlignedBuffer = require('aligned_buffer').AlignedBuffer;

try {
  var buf = new AlignedBuffer(480 * 272 * 2, 32);
  var graphics = new Graphics({buf:buf, width:480, height:272, format:'rgb565'});
  graphics.drawRect(0, 0, 480, 272, 0xFFFF, true); /* 背景を白で塗りつぶす */
  graphics.drawText('Hello World!', 0, 0, 2, 0x0000, 0xFFFF);
} catch (err) {
  console.log(err);
}