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