graphics
モジュールは、フレームバッファへのグラフィックスの描画を行います。
config
{Object} グラフィックスの描画を行うフレームバッファの設定buf
{AlignedBuffer} フレームバッファとして使用するバッファ。必須項目です。width
{number} フレームバッファの横幅(ピクセル数)。必須項目です。height
{number} フレームバッファの高さ(ピクセル数)。必須項目です。format
{string} フレームバッファのピクセルフォーマット。"rgb565"
, "rgb888"
, "argb8888"
, "argb4444"
のいずれかが指定できます。必須項目です。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);
}
フレームバッファへのグラフィックスの描画を行うクラスです。
本クラスで使用する色データは、new Graphics()
のconfig.format
で指定したフォーマットの1ピクセル当たりのデータをnumber
で指定します。
各フォーマットに対して、色データの各ビットの対応関係は以下のようになります。
"rgb565"
: 0bRRRRRGGGGGGBBBBB
"argb4444"
: 0bAAAARRRRGGGGBBBB
"rgb888"
: 0bXXXXXXXXRRRRRRRRGGGGGGGGBBBBBBBB
(X
のビットの値は無効)"argb8888"
: 0bAAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB
new Graphics()
のconfig.buf
に指定した値が得られます。new Graphics()
のconfig.width
に指定した値が得られます。new Graphics()
のconfig.height
に指定した値が得られます。new Graphics()
のconfig.format
に指定した値が得られます。image
{Object} 転送元の画像データwidth
{number} 画像の幅(ピクセル数)。height
{number} 画像の高さ(ピクセル数)bitmap
{AlignedBuffer} 画素データ。ピクセルフォーマットはgraphics.bufferFormat
と一致している必要があります。x
{number} 転送先の左上X座標 (省略時: 0
)y
{number} 転送先の左上Y座標 (省略時: 0
)画像をフレームバッファに転送(コピー)します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
指定された各座標やサイズがフレームバッファのサイズを超える場合、サイズ内の範囲に切り詰められます。切り詰めた結果、転送する領域の横幅や高さが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);
}
startX
{number} 線の始点のX座標startY
{number} 線の始点のY座標endX
{number} 線の終点のX座標endY
{number} 線の終点のY座標color
{number} 線の色フレームバッファに線を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
x
{number} 矩形の左上X座標y
{number} 矩形の左上Y座標width
{number} 矩形の幅height
{number} 矩形の高さcolor
{number} 矩形の色fill
{boolean} true
:塗りつぶしあり, false
:塗りつぶしなしフレームバッファに矩形を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
centerX
{number} 弧の中心点のX座標centerY
{number} 弧の中心点のY座標radius
{number} 弧の半径startAngle
{number} 弧の始点の角度endAngle
{number} 弧の終点の角度color
{number} 弧の色フレームバッファに弧を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
centerX
{number} 円の中心点のX座標centerY
{number} 円の中心点のY座標radius
{number} 円の半径color
{number} 円の色fill
{boolean} true
:塗りつぶしあり, false
:塗りつぶしなしフレームバッファに円を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
centerX
{number} 楕円の中心点のX座標centerY
{number} 楕円の中心点のY座標radiusX
{number} 楕円のX方向の半径radiusY
{number} 楕円のY方向の半径color
{number} 楕円の色fill
{boolean} true
:塗りつぶしあり, false
:塗りつぶしなしフレームバッファに楕円を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
centerX
{number} 正多角形の中心点のX座標centerY
{number} 正多角形の中心点のY座標radius
{number} 正多角形の中心点と頂点の距離(外接円の半径)sides
{number} 正多角形の辺の数color
{number} 正多角形の色fill
{boolean} true
:塗りつぶしあり, false
:塗りつぶしなしフレームバッファに正多角形を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}
text
{string} 描画する文字列。Ascii文字のみ対応しています。x
{number} 文字列のX座標y
{number} 文字列のY座標size
{number} 文字列のフォントサイズ。描画される文字は、幅size×6ピクセル
、高さsize×8ピクセル
になります。color
{number} 文字列の色background
{number} 文字列の背景の色フレームバッファに文字列を描画します。処理は同期で行われ、処理が完了すると呼び出し元に戻ります。失敗すると例外をスローします。
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);
}