kowala's home

kowala's home
這裡是我的學習筆記,陸續增加中。
http://kowala21.blogspot.com

2016-06-06

BCB6 - 2D實驗室 移動畫素

上一篇 2D實驗室,簡單介紹了畫素產生,我們使用了圖紙物件 TBitmap 來存放畫素。本篇接著介紹簡單地處理畫素移動,電腦螢幕的座標系統,是以左上為原點(0,0),向右x遞增,向下y遞增,如下圖左上角所示。


若我們想要圖形由右下朝左上移動,如上圖,水平x減少80個畫素,垂直y減少80個畫素,這樣就可以做到由右下朝左上移動。

好了,知道原理後該如何做?我希望在我們的實驗室中,按下move按鈕,圖形會朝左上移動,按下back按鈕,圖形會跑回來,如下圖。

那我們必須在move按鈕的按下事件中,寫右下朝左上移動,然後在back按鈕的按下事件中,寫左上朝右下移動。
觀察上圖,我們要移動綠色框所圈起來的畫素,那我們要知道綠色框的左上角點與圖紙的原點(左上角) 偏移多少畫素,綠色框的寬與高是多少畫素,然後每個畫素x-80,y-80,把它寫回圖紙物件 myLab (TBitmap物件),再把 myLab 指給Image1物件,這樣就會顯示移動的樣子了。

上述說明可以知道,為了移動這些像素,我們要知道好多參數,
綠色框偏移值
綠色框的寬與高
要移動多少畫素
...

    int ori_w;    //原圖寬
    int ori_h;    //原圖高
    int off_x;    //矩形對原點偏移x(左上點)
    int off_y;    //矩形對原點偏移y
    int box_w;    //框寬度限制
    int box_h;    //框高度限制
    int mov_x;    //tar x  矩形移動到(左上點)
    int mov_y;     //tar y

我不想直接在按鈕的事件中撰寫代碼,這會使程式看起來凌亂,我想要在事件中只寫參數,然後把參數傳遞給我們的LIB去處理,我們可以使用結構體來簡化參數的傳遞,也就是我只需傳遞結構體的指標就可以了。做法如下,

1.在 mylib.h中宣告結構體
struct coordinate{ //參數結構體宣告
    int ori_w;    //原圖寬
    int ori_h;    //原圖高
    int off_x;    //矩形對原點偏移x(左上點)
    int off_y;    //矩形對原點偏移y
    int box_w;    //框寬度限制
    int box_h;    //框高度限制
    int mov_x;    //tar x  矩形移動到(左上點)
    int mov_y;     //tar y
};

2.順便宣告結構體指標
coordinate *coor;

3.在mainfrm.cpp中,新增一個結構體變數
//new一個結構體參數
coor = new coordinate;

4.在按鈕的事件中給予座標值,呼叫函式moveTo(),把結構體指標 coor 及圖紙物件指標 myLab 傳進去,移動處理後,再把 myLab 指給Image1物件。

//move 按鈕的事件 右下朝左上
void __fastcall TForm1::Button2Click(TObject *Sender)
{
    coor->ori_w=640;
    coor->ori_h=480;
    coor->off_x=240;    //矩形對原點偏移x(左上點)
    coor->off_y=180;    //矩形對原點偏移y
    coor->box_w=160;
    coor->box_h=120;
    coor->mov_x=160;    //tar x  = off_x-80
    coor->mov_y=100;     //tar y = off_y-80
    moveTo(myLab,coor);
    Image1->Picture->Bitmap=myLab;
}

//back 按鈕的事件 左上朝右下
void __fastcall TForm1::Button3Click(TObject *Sender)
{
    coor->ori_w=640;
    coor->ori_h=480;
    coor->off_x=160;    //矩形對原點偏移x(左上點)
    coor->off_y=100;    //矩形對原點偏移y
    coor->box_w=160;
    coor->box_h=120;
    coor->mov_x=240;    //tar x  = off_x+80
    coor->mov_y=180;     //tar y = off_y+80
    moveTo(myLab,coor);
    Image1->Picture->Bitmap=myLab;
}

在 mylib.h中,移動處理函式moveTo()代碼。
//move to
void moveTo(Graphics::TBitmap *scr,coordinate *co){
    Graphics::TBitmap *tmp;//開一塊 mem
    tmp = new Graphics::TBitmap();
    tmp->PixelFormat = pf24bit; //bmp
    tmp->Height = co->ori_h;//圖紙 h
    tmp->Width = co->ori_w;//圖紙 w
    int i,j;
    int len=co->ori_w*3;//line = (byte*) {B,G,R},{B,G,R}...
    //設定底色
    for(j=0;j<co->ori_h;j++){//initial value
        memset(tmp->ScanLine[j],clBlack,len);//clBlack=0=0x00,clWhite=255=0xff
    }
    //開始複製 moveto tmp
    for(i=0;i<co->box_w;i++){
        for(j=0;j<co->box_h;j++){
            tmp->Canvas->Pixels[i+co->mov_x][j+co->mov_y] =
            scr->Canvas->Pixels[i+co->off_x][j+co->off_y];
        }
    }
    //覆蓋回去 scr
    for(j=0;j<co->ori_h;j++){
        memcpy(scr->ScanLine[j],tmp->ScanLine[j],len);
    }
    delete tmp;
}

這樣就完成了

範例程式 IMGLab.rar

2016-04-05

BCB6 - 2D實驗室

本篇就是開一塊記憶體,隨便塗鴉,然後顯示出來,主要是做個環境來測試一些繪圖演算法,當然,你要當作秀圖機,開圖檔也可以的。

首先用 BCB 開一個 vcl 專案,詳細請參考前面文章
BCB6 視窗程式入門
http://kowala21.blogspot.tw/2013/01/bcb6.html

接著新增兩個按鈕,及一個 TImage 物件

把 TImage 物件屬性改成
Height 480
Width 640
這就是我們的工作區,但它現在是空的,我們還要新增TBitmap 物件,並指給它。
我們先新增個 mylib.h ,這樣會使程式看起來較簡潔。
 在專案右鍵,然後新增個 h檔,再改檔名為 mylib.h

把它引入, #include "mylib.h"
我們可以新增個圖紙物件 TBitmap,並指給TImage 物件,並為它設定屬性,指定底色。
看起來就像這樣。
這樣看起來很單調,為它加一些其他東西, 我希望能在 mylib.h 中完成,所以必須寫個函式,把 TBitmap 物件傳進去。

 然後我們可以在 mylib.h 中為所欲為,我為它加了框,畫了X,順便寫幾個字。

mylib.h

code如下
void initSCR(Graphics::TBitmap *buf){
    int w,h,cx,cy,left, top, right, bottom;
    //先在中間畫個框 160*120 TRect(left, top, right, bottom)
    buf->Canvas->Pen->Color = clGreen;//綠色
    buf->Canvas->Brush->Style = bsClear;//框中間透明 Rectangle
    h=buf->Height;//480 工作區寬度
    w=buf->Width;//640 工作區高度
    cx=w/2;    cy=h/2;    //320*240 中心點
    left=cx-(160/2);//240
    top=cy-(120/2);//180
    right=cx+(160/2);//400
    bottom=cy+(120/2);//300
    buf->Canvas->Rectangle(TRect(left,top,right,bottom));//開始畫
    //中間畫 X,用描點的畫
    buf->Canvas->Pixels[cx-3][cy-3] = clWhite;
    buf->Canvas->Pixels[cx-2][cy-2] = clWhite;
    buf->Canvas->Pixels[cx-1][cy-1] = clWhite;
    buf->Canvas->Pixels[cx][cy] = clWhite;//center point (320,240)
    buf->Canvas->Pixels[cx+1][cy+1] = clWhite;
    buf->Canvas->Pixels[cx+2][cy+2] = clWhite;
    buf->Canvas->Pixels[cx+3][cy+3] = clWhite;

    buf->Canvas->Pixels[cx-3][cy+3] = clWhite;
    buf->Canvas->Pixels[cx-2][cy+2] = clWhite;
    buf->Canvas->Pixels[cx-1][cy+1] = clWhite;
    buf->Canvas->Pixels[cx][cy] = clWhite;
    buf->Canvas->Pixels[cx+1][cy-1] = clWhite;
    buf->Canvas->Pixels[cx+2][cy-2] = clWhite;
    buf->Canvas->Pixels[cx+3][cy-3] = clWhite;
    //再加個字
    buf->Canvas->Brush->Color = clGreen;//background color
    buf->Canvas->Font->Color = clWhite;//font color
    buf->Canvas->Font->Size=10;
    buf->Canvas->TextOutA(left+30,top+20,"再加個字");
    buf->Canvas->Brush->Color = clBlack;//background color
    buf->Canvas->Font->Color = clYellow;//font color
    buf->Canvas->TextOutA(left+50,top+80,"不要底色");
}
mainfrm.cpp
code 如下
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include "mainfrm.h"
#include "mylib.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
Graphics::TBitmap *myLab;//宣告圖紙,當工作區
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
    myLab = new Graphics::TBitmap();//開一塊圖紙,當工作區
    myLab->PixelFormat = pf24bit; //bmp
    myLab->Height = 480;//圖紙 h
    myLab->Width = 640;//圖紙 w
    //設定底色
    myLab->Canvas->Brush->Color = clBlack;//background = clBlack
    myLab->Canvas->FloodFill(0,0,clBlack,fsBorder);//fsSurface,fsBorder

    //把物件傳進去
    initSCR(myLab);

    //指給Image1物件
    Form1->Image1->Picture->Bitmap=myLab;

}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
    this->Close();
}
//---------------------------------------------------------------------------

這樣就是一個簡單實驗室了