Sekarang kita akan mempelajari cara menentukan "Apakah kita melakukan klik di dalam atau di luar persegi". Untuk mencaritahu apakah pointer mouse sudah di dalam suatu bangun datar, yang pertama harus kita lakukan adalah mencari tahu koordinat dari posisi pointer. Selanjutnya, kalian perlu mengecek letak koordinatnya dari tiap sisi dengan percabangan.
Sebelum mempelajari ini, kalian harus memahami cara mendapatkan data dari event yang terkait dengan mouse. Untuk mengetahui apakah suatu titik berada di dalam atau di luar persegi, kalian perlu mengecek posisi koordinat pointer mouse sebelum membandingkan letaknya dengan posisi kordinat {x, y}. Posisi koordinat mouse tersimpan dalam member button yang dimiliki variabel bertipe SDL_Event.
Sebelum menggunakan persegi panjang, saya akan coba jelaskan cara menentukan apakah titik koordinat berada di antara dua garis vertikal atau garis "x=n". Daripada terlalu banyak teori, mari kita langsung lihat dan analisa kode programnya!
Jika kalian melakukan klik di antara dua garis, maka akan muncul "garis yang menyilang yang ada di antara dua garis tersebut". Saat yang diklik adalah sebelah kiri atau kanan dari dua garis tersebut, maka garis menyilang tersebut akan menghilang. Ini terjadi karena ada pengecekan koordinat pointer mouse saat mouse diklik. Status mouse disimpan dalam variabel pas.
Bagian kode program yang mengecek posisi pointer mouse adalah bagian di bawah ini.
Selanjutnya, mari kita coba dengan garis "y=n" atau garis horisontal.
Kalian bisa meng-compile programnya dan menjalankannya. Kemudian, klik di antara dua garis yang terlihat supaya muncul garis menyilang!
Pada dasarnya, kode program kedua punya kesamaan dengan kode pertama. Kedua kode program tersebut mengecek koordinat mouse setelah adanya event mouse. Bedanya, kode program pertama mengecek koordinat x antara dua garis, sedangkan kode program kedua mengecek koordinat y-nya.
Selanjutnya, kita akan gabungkan beberapa bagian dari kode program tersebut. Hasilnya akan jadi seperti di bawah ini.
Supaya muncul garis menyilang, kalian harus melakukan klik tepat di kotak yang berada di tengah. Kalau bagian lain yang diklik, maka garis menyilang tersebut akan hilang.
Untuk yang terakhir, kita akan sedikit mengubah kode programnya agar menampilkan persegi panjang. Kita tidak akan menggunakan garis-garis yang berpotongan seperti di atas. Walaupun begitu, pada dasarnya sebagian kode program di bawah ini sama dengan kode terakhir di atas.
Dalam kode program di atas, kita hanya mengubah sedikit bagian dari kode program sebelumnya. Kita mengganti "garis-garis yang berpotongan" dengan "persegi panjang yang digambar menggunakan SDL_RenderDrawRect". Garis menyilang akan terlihat kalau kalian melakukan klik di dalam persegi panjang tersebut.
Kalau kalian sudah paham kode program yang saya jadikan contoh, sekarang kalian sudah bisa membuat program untuk mengecek keberadaan pointer di dalam persegi panjang ataupun bujur sangkar.
Sebelum mempelajari ini, kalian harus memahami cara mendapatkan data dari event yang terkait dengan mouse. Untuk mengetahui apakah suatu titik berada di dalam atau di luar persegi, kalian perlu mengecek posisi koordinat pointer mouse sebelum membandingkan letaknya dengan posisi kordinat {x, y}. Posisi koordinat mouse tersimpan dalam member button yang dimiliki variabel bertipe SDL_Event.
Sebelum menggunakan persegi panjang, saya akan coba jelaskan cara menentukan apakah titik koordinat berada di antara dua garis vertikal atau garis "x=n". Daripada terlalu banyak teori, mari kita langsung lihat dan analisa kode programnya!
#include <math.h>
#include <SDL2/SDL.h>
#define playar 640
#define tlayar 480
int main(int argc, char* args[]){
SDL_Window* window = NULL;
SDL_Event evt;
int xpos=0, pas=0;
int x1=playar/3;
int x2=playar*2/3;
if( SDL_Init( SDL_INIT_VIDEO ) < 0){
printf( "Error: %s\n", SDL_GetError() );
}else{
window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, playar, tlayar, SDL_WINDOW_SHOWN );
if( window == NULL ){
printf( "Error : %s", SDL_GetError() );
}else{
SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);
while(evt.type!=SDL_QUIT){
while(SDL_PollEvent(&evt)){
}
if(evt.type==SDL_MOUSEBUTTONUP){
xpos=evt.button.x;
if(xpos>=x1 && xpos <x2){
pas=1;
}else pas=0;
}
SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
SDL_RenderClear(trender);
SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);
if(pas==1){
SDL_RenderDrawLine(trender, x1, 0, x2, tlayar);
SDL_RenderDrawLine(trender, x2, 0, x1, tlayar);
}
SDL_RenderDrawLine(trender, x1, 0, x1, tlayar);
SDL_RenderDrawLine(trender, x2, 0, x2, tlayar);
SDL_RenderPresent(trender);
}
}
}
SDL_DestroyWindow( window );
SDL_Quit();
return 0;
}
Jika kalian melakukan klik di antara dua garis, maka akan muncul "garis yang menyilang yang ada di antara dua garis tersebut". Saat yang diklik adalah sebelah kiri atau kanan dari dua garis tersebut, maka garis menyilang tersebut akan menghilang. Ini terjadi karena ada pengecekan koordinat pointer mouse saat mouse diklik. Status mouse disimpan dalam variabel pas.
Bagian kode program yang mengecek posisi pointer mouse adalah bagian di bawah ini.
if(evt.type==SDL_MOUSEBUTTONUP){
xpos=evt.button.x;
if(xpos>=x1 && xpos <x2){
pas=1;
}else pas=0;
}Selanjutnya, mari kita coba dengan garis "y=n" atau garis horisontal.
#include <math.h>
#include <SDL2/SDL.h>
#define playar 640
#define tlayar 480
int main(int argc, char* args[]){
SDL_Window* window = NULL;
SDL_Event evt;
int ypos=0, pas=0;
int y1=tlayar/3;
int y2=tlayar*2/3;
if( SDL_Init( SDL_INIT_VIDEO ) < 0){
printf( "Error: %s\n", SDL_GetError() );
}else{
window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, playar, tlayar, SDL_WINDOW_SHOWN );
if( window == NULL ){
printf( "Error : %s", SDL_GetError() );
}else{
SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);
while(evt.type!=SDL_QUIT){
while(SDL_PollEvent(&evt)){
}
if(evt.type==SDL_MOUSEBUTTONUP){
ypos=evt.button.y;
if(ypos>=y1 && ypos <y2){
pas=1;
}else pas=0;
}
SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
SDL_RenderClear(trender);
SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);
if(pas==1){
SDL_RenderDrawLine(trender, 0, y1, playar, y2);
SDL_RenderDrawLine(trender, 0, y2, playar, y1);
}
SDL_RenderDrawLine(trender, 0, y1, playar, y1);
SDL_RenderDrawLine(trender, 0, y2, playar, y2);
SDL_RenderPresent(trender);
}
}
}
SDL_DestroyWindow( window );
SDL_Quit();
return 0;
}
Pada dasarnya, kode program kedua punya kesamaan dengan kode pertama. Kedua kode program tersebut mengecek koordinat mouse setelah adanya event mouse. Bedanya, kode program pertama mengecek koordinat x antara dua garis, sedangkan kode program kedua mengecek koordinat y-nya.
Selanjutnya, kita akan gabungkan beberapa bagian dari kode program tersebut. Hasilnya akan jadi seperti di bawah ini.
#include <math.h>
#include <SDL2/SDL.h>
#define playar 640
#define tlayar 480
int main(int argc, char* args[]){
SDL_Window* window = NULL;
SDL_Event evt;
int xpos=0, ypos=0, pas=0;
int x1=playar/3;
int x2=playar*2/3;
int y1=tlayar/3;
int y2=tlayar*2/3;
if( SDL_Init( SDL_INIT_VIDEO ) < 0){
printf( "Error: %s\n", SDL_GetError() );
}else{
window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, playar, tlayar, SDL_WINDOW_SHOWN );
if( window == NULL ){
printf( "Error : %s", SDL_GetError() );
}else{
SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);
while(evt.type!=SDL_QUIT){
while(SDL_PollEvent(&evt)){
}
if(evt.type==SDL_MOUSEBUTTONUP){
xpos=evt.button.x;
ypos=evt.button.y;
if((xpos>=x1 && xpos <x2) && (ypos>=y1 && ypos <y2)){
pas=1;
}else pas=0;
}
SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
SDL_RenderClear(trender);
SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0xFF, 0xFF);
SDL_RenderDrawLine(trender, 0, y1, playar, y1);
SDL_RenderDrawLine(trender, 0, y2, playar, y2);
SDL_RenderDrawLine(trender, x1, 0, x1, tlayar);
SDL_RenderDrawLine(trender, x2, 0, x2, tlayar);
if(pas==1){
SDL_RenderDrawLine(trender, x1, y1, x2, y2);
SDL_RenderDrawLine(trender, x2, y1, x1, y2);
}
SDL_RenderPresent(trender);
}
}
}
SDL_DestroyWindow( window );
SDL_Quit();
return 0;
}
Untuk yang terakhir, kita akan sedikit mengubah kode programnya agar menampilkan persegi panjang. Kita tidak akan menggunakan garis-garis yang berpotongan seperti di atas. Walaupun begitu, pada dasarnya sebagian kode program di bawah ini sama dengan kode terakhir di atas.
#include <math.h>
#include <SDL2/SDL.h>
#define playar 640
#define tlayar 480
int main(int argc, char* args[]){
SDL_Window* window = NULL;
SDL_Event evt;
SDL_Rect rct;
int xpos=0, ypos=0, pas=0;
int x1=playar/3;
int x2=playar*2/3;
int y1=tlayar/3;
int y2=tlayar*2/3;
if( SDL_Init( SDL_INIT_VIDEO ) < 0){
printf( "Error: %s\n", SDL_GetError() );
}else{
window = SDL_CreateWindow( "SDLku", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, playar, tlayar, SDL_WINDOW_SHOWN );
if( window == NULL ){
printf( "Error : %s", SDL_GetError() );
}else{
SDL_Renderer *trender = SDL_CreateRenderer( window, -1, SDL_RENDERER_ACCELERATED);
while(evt.type!=SDL_QUIT){
while(SDL_PollEvent(&evt)){
}
if(evt.type==SDL_MOUSEBUTTONUP){
xpos=evt.button.x;
ypos=evt.button.y;
if((xpos>=x1 && xpos <x2) && (ypos>=y1 && ypos <y2)){
pas=1;
}else pas=0;
}
SDL_SetRenderDrawColor(trender, 0xFF, 0xFF, 0xFF, 0xFF);
SDL_RenderClear(trender);
rct.x=x1;
rct.y=y1;
rct.w=x2-x1;
rct.h=y2-y1;
SDL_SetRenderDrawColor(trender, 0xFF, 0x00, 0x00, 0xFF);
SDL_RenderDrawRect(trender, &rct);
SDL_SetRenderDrawColor(trender, 0x00, 0x00, 0xFF, 0xFF);
if(pas==1){
SDL_RenderDrawLine(trender, x1, y1, x2, y2);
SDL_RenderDrawLine(trender, x2, y1, x1, y2);
}
SDL_RenderPresent(trender);
}
}
}
SDL_DestroyWindow( window );
SDL_Quit();
return 0;
}
Kalau kalian sudah paham kode program yang saya jadikan contoh, sekarang kalian sudah bisa membuat program untuk mengecek keberadaan pointer di dalam persegi panjang ataupun bujur sangkar.