グラフィックス |
点を打つ・線を引くなどは当然のこととしてbmp,png,jpgの画像も表示できます。
安いデバイスでこんなことができるのは驚きです。コードを書く時には、以後紹介する関数の前に M5.Lcd. をつけてください。 void clear() https://docs.m5stack.com/en/api/core2/lcd_api では void drawPixel(int32_t x, int32_t y, uint32_t color) となっていますが、LCDが16ビットカラーなのでuint32_tではなく uint16_tの間違いではないかと思います。 void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint32_t color) x0,y0からx1,y1へcolorの色で線を引きます。 void drawFastVLine(int32_t x, int32_t y, int32_t w, uint32_t color) x,yの座標からwの長さの線を縦に引きます。wにマイナスを指定すると描画されません。 void drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color) x,yの座標からwの長さの線を横に引きます。wにマイナスを指定すると描画されません。 void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color) これで四角形の枠の部分が描かれます。写真の一番上の赤い四角形です。 void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color) べた塗りの四角形が描かれます。中央の黄色い四角形です。 多分一番下の四角形を描きたいと場面があると思います。他の処理系ではフィルとストロークが サポートされていて外枠、塗りつぶしを指定して描画できます。しかし、M5Stackではサポートされていないようで fillRect()とdrawRect()を組み合わせればできます。 M5.Lcd.fillRect(100, 140, 80, 70, BLUE); M5.Lcd.drawRect(100, 140, 80, 70, WHITE); 四角形とほぼ同じです。 void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint32_t color) と、 void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint32_t color) を使います。rでどれだけ丸めるかを指定します。 void drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color) と、 void drawCircle(int32_t x0, int32_t y0, int32_t r, uint32_t color) を使います。 void fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_t color) と、 void fillEllipse(int16_t x0, int16_t y0, int32_t rx, int32_t ry, uint16_t color) を使います。rx,ryで楕円の縦横の長さを指定します。rxとryを同じにすると円になります。 三角形が描けるとは! void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color) と、 void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint32_t color) を使います。座標に3点を指定します。 drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint16_t *data) drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, uint16_t *data) drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint16_t *data, uint16_t transparent) drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, const uint8_t *data) drawBitmap(int16_t x0, int16_t y0, int16_t w, int16_t h, uint8_t *data) たくさんあります。直接ビットマップデータを扱う場面って、今までなかったような?あった! カラオケソフトで白抜き文字や演奏ととに白から緑にワイプする処理でやりました。とりあえずサンプルコードです。 const uint16_t bitmap[8*16] ={ 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xf800, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, 0xffff, }; M5.Lcd.drawBitmap(10, 20, 8, 16, bitmap);配列の内容は16ビットの1点に対するカラーデータです。縦16ドット、横ドットの大きさす。 上部が赤、下部が白になっています。 void drawBmpFile(fs::FS &fs, const char *path, uint16_t x, uint16_t y) なんかよく分かりません。具体例です。 M5.Lcd.drawBmpFile(SD, "/ufo24.bmp",0,0); SDカードのルートにあるufo24.bmpを描画しています。fs(File Stream)がいまいち分かりません。 void drawPngFile(fs::FS &fs, const char *path, uint16_t x, uint16_t y) ビットマップファイルと同じです。 M5.Lcd.drawPngFile(SD, "/zerosen.png", 0, 0); void drawJpgFiledrawJpgFile(fs::FS &fs, const char *path, uint16_t x,uint16_t y,uint16_t maxWidth, uint16_t maxHeight, uint16_t offX,uint16_t offY, jpeg_div_t scale) 画像を表示大きさやオフセットを指定できます。簡単に、 M5.Lcd.drawJpgFile(SD, "/flower.jpg", 0, 0); ビットマップファイルと同じに指定することもできます。 |