グラフィックス
ウィジェットを使わない
ピクセル、直線、円などの描画

（→プロジェクトファイル(Harmony Ver.2.04版 )　ダウンロード）

　ウィジェットを使わないで　ピクセル、直線、円、塗りつぶしの長方形を描画する例を紹介します。



＜仕様＞
・　ウィジェットを使わないでグラフィックス液晶INT035に以下を表示する。
　　➀　ピクセル
　　➁　直線
　　③　円
　　④　塗りつぶしの長方形
・描画に際しての座標は以下とする。
　　ピクセル、円、塗りつぶされた長方形　……　画面左上を原点（0,0）、　画面右下を（320,240）とする
　　直線　……　画面左下を原点(0,0)、画面右上を（320,240)
・色の指定は　16bitカラー整数値を直接使用する。　例：　赤色： 0xF800　　（参照　→　URL)
・ピクセルの描画は赤色とし、描画座標は以下とする。
　(20,20)
　(40,40) (40-1,40) (40,40-1) (40-1,40-1)
　(60,60) (60-1,60) (60,60-1) (60-1,60-1) (60+1,60) (60,60+1) (60+1,60+1) (60-1,60-1)

・直線の描画は青色とし、以下の3本とする。　
　(0,0) と(200,210)の間の直線
　(0,0) と(200,140)の間の直線
　(0,0) と(200,70)の間の直線

・円の描画は黒色とし、以下の3個とする。
　中心(50,120) 半径：25
　中心(100,120) 半径：50
　中心(150,120) 半径：75

・以下の3個の長方形を塗りつぶすこと
　左上座標(240, 30) 左下座標(310, 30 +40)の長方形、塗りつぶし色は赤色
　左上座標(240, 100) 左下座標(310, 100 +40)の長方形、塗りつぶし色は白色
　左上座標(240, 170) 左下座標(310, 170 +40)の長方形、塗りつぶし色は黄色

・描画は　サンプルプログラム　"LED　タッチ　オンオフ" の以下の画面に重畳すること


　　






＜回路図＞　(→PDFファイル）





＜外観＞PIC32MZ評価ボード（→購入方法）を使った実験品の外観です。



＜動作結果＞　（→　動画：1080ｐのHD動画を見ることができます。）　

ピクセル、直線、円、塗りつぶしの長方形が描画された画面 
（参考）
サンプルプログラム　"LED　タッチ　オンオフ" の画面




＜解説＞
　
　・　INT035用のグラフィックスライブラリ　ys_drv_touch_generic_int035.h　、ys_drv_gfx_int035.c　の中には　
　　ウィジェットを使わないで　　ピクセル、直線、円、塗りつぶしの長方形を描く関数があります。

サンプルプログラム　"LED　タッチ　オンオフ" 　のプロジェクトファイルに以下の変更を加えます。


1.　ys_drv_gfx_int035.cファイルの　void ys_drawLine( )関数は通常使用しないので中がコメントアウトされています。
　　このコメントアウトをすべて削除して、ys_drawLine( )関数が使用できるようにします。ys_drawLine( )関数は
　　直線を描画する関数です。

　 

　　　　　　　　　　

  　

void ys_drawLine(int x0, int y0, int x1, int y1, int color)
{   
//    short steep, t;
//    short deltax, deltay, error;
//    short x, y;
//    short ystep;
//
//    
//        y0=DISP_VER_RESOLUTION-y0 -1;                                               
//        y1=DISP_VER_RESOLUTION-y1 -1;
//        steep = (abs(y1 - y0) > abs(x1 - x0));
//        if(steep){
//                t = x0; x0 = y0; y0 = t;
//                t = x1; x1 = y1; y1 = t;
//        }
//        if(x0 > x1) {
//                t = x0; x0 = x1; x1 = t;
//                t = y0; y0 = y1; y1 = t;
//        }
//        deltax = x1 - x0;                                              
//        deltay = abs(y1 - y0);
//        error = 0;
//        y = y0;
//        if(y0 < y1) ystep = 1; else ystep = -1;
//        for(x=x0; x<=x1; x++)
//        {
//                if(steep)  ys_pixelSet(y,x,color); else  ys_pixelSet(x,y,color);
//                error += deltay;
//                if((error << 1) >= deltax) {
//                        y += ystep;
//                        error -= deltax;
//                }
//        }
    
}

　

 


2.　libaria_events.c　の　 MyLibariaEvents( )関数の中に　太線部を追記します。
　・色は　16ビットカラー整数値で直接指定します。
　・ ys_pixelSet(x0, y0, myColor1)は　ピクセルを描画する関数です。
　　(x0,y0)がピクセルが描画される座標で、　myColorで色を指定します。

　・ys_drawLine(x1,y1, x2, y2, myColor) は直線を描画する関数です。
　　座標(x1,y1) と(x2,y2)の間に　myColorで指定される色の直線が描画されます。

　・ys_drawCircle(x0, y0, r0, myColor) は円を描画する関数です。
　　中心座標(x0,y0)、 半径r0、色myColorの円が描画されます。

　・ys_fillRect( left, top, right, bottom, myColor)は　塗りつぶしの長方形を描画する関数です。
　　左上座標(left,top), 右下座標(right,bottom)の長方形の内部をmyColor色に塗りつぶします。




　  
//追加部分   

//----------------------------------------------------

    int myColor1 = 0xf800;  //赤色

    int myColor2 = 0x001f;  //青色

    int myColor3 = 0x0000;  //黒色

    int myColor4 = 0xffff;  //白色

    int myColor5 = 0xffe0;  //黄色

    

    int x0 = 20,

        y0 = 20;

    

    

//ピクセル描画

    //赤色ピクセルを座標(20,20)に描画

    ys_pixelSet(x0, y0, myColor1);

    

    //赤色ピクセルを座標(40,40),(40 +1,40),(40,40 +1),(40 + 1,40 +1)に描画  //合計4個

    ys_pixelSet(x0 *2, y0 *2, myColor1);

    ys_pixelSet(x0 *2 -1, y0 *2, myColor1);

    ys_pixelSet(x0 *2, y0 *2 -1, myColor1);

    ys_pixelSet(x0 *2 -1, y0 *2 -1, myColor1);

    

    //赤色ピクセルを　9個を座標(30,40)　及び同座標周辺に作成    //合計9個

    ys_pixelSet(x0 *3, y0*3, myColor1);

    ys_pixelSet(x0 *3, y0*3 - 1, myColor1);

    ys_pixelSet(x0 *3, y0*3 + 1, myColor1);

    ys_pixelSet(x0 *3 - 1, y0*3 - 1, myColor1);

    ys_pixelSet(x0 *3 - 1, y0*3    , myColor1);

    ys_pixelSet(x0 *3 - 1, y0*3 + 1, myColor1);

    ys_pixelSet(x0 *3 + 1, y0*3 - 1, myColor1);

    ys_pixelSet(x0 *3 + 1, y0*3    , myColor1);

    ys_pixelSet(x0 *3 + 1, y0*3 + 1, myColor1);

    

//直線を描画　に作成   //但し座標原点は画面左下    

    ys_drawLine(0, 0, 200, 210, myColor2);  //座標(0,0) と(200,210)の間の直線   //色は青色

    

    ys_drawLine(0, 0, 200, 140, myColor2);  //座標(0,0) と(200,140)の間の直線   //色は青色

    

    ys_drawLine(0, 0, 200, 70, myColor2);   //座標(0,0) と(200,70)の間の直線    //色は青色

    

    

//円を描画          //但し座標原点は画面左上　

    ys_drawCircle(50, 120, 25, myColor3);   //中心座標(50,120) 半径：25      //色は黒色

    

    ys_drawCircle(100, 120, 50, myColor3);  //中心座標(100,120) 半径：50      //色は黒色

    

    ys_drawCircle(150, 120, 75, myColor3);  //中心座標(150,120) 半径：75      //色は黒色 

    

    

//長方形を描画    

// ys_fillRect(int left, int top, int right, int bottom, int color);

 ys_fillRect(240, 30, 310, 30 +40, myColor1);   //左上座標(240, 30) 左下座標(310, 30 +40)の長方形　塗りつぶし色は赤色

 

 ys_fillRect(240, 100, 310, 100 +40, myColor4); //左上座標(240, 100) 左下座標(310, 100 +40)の長方形　塗りつぶし色は白色

 

 ys_fillRect(240, 170, 310, 170 +40, myColor5);//左上座標(240, 170) 左下座標(310, 170 +40)の長方形　塗りつぶし色は黄色

    

//--------------------------------------------------------    

//以上、追加部分

以下、libaria_events.c　（青線部が追記部分です）