Posisi Mouse dan HitTest ~ Pemrograman dan Teknologi

Hit-test adalah istilah yang sering digunakan untuk menyatakan pengecekkan posisi pointer mouse terhadap posisi suatu objek atau posisi suatu objek terhadap objek lainnya. Dengan memahami hit-test sederhana, kita bisa mengetahui apakah pointer berada di dalam objek atau di luar objek. Kita juga bisa mencari tahu apakah suatu objek atau bentuk telah bertabrakan atau belum dengan objek lain.

Misalnya, kita akan menampilkan persegi dan mencaritahu apakah pointer mouse berada dalam persegi yang digambar saat mouse diklik. Sebelumnya, coba gambar perseginya terlebih dahulu. Tambahkan juga function pada event onclick.

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>BELAJAR HTML</TITLE>
</HEAD>
<BODY>
    <CANVAS id="kanvas" width="400" height="400" style="background:blue">
        kanvas tidak dapat ditampilkan.
    </CANVAS>
    <SCRIPT>
        var xpos=150;
        var ypos=150;
        var panjang=100;
        var lebar=100;
        var kanvas=document.getElementById("kanvas");
        var ct=kanvas.getContext("2d");
        ct.fillStyle="red";
        ct.beginPath();
        ct.rect(xpos, ypos, panjang, lebar);
        ct.fill();

        kanvas.onclick=function(){
            alert("diklik");
        }
    </SCRIPT>
</BODY>
</HTML>

Pada kode di atas, kita menyimpan posisi persegi dalam variabel xpos dan ypos. Panjangnya kita simpan dalam variabel panjang, dan lebarnya kita simpan dalam variabel lebar. Untuk mengetahui apakah posisi pointer mouse berada dalam persegi, kita bisa membandingkan posisi xpos dan ypos dengan posisi mouse saat event tertentu. Sekarang coba ubah onclicknya menjadi seperti di bawah ini!

kanvas.onclick=function(e){            
    alert("x="+e.clientX+"\ny="+e.clientY);

}

Jika canvas diklik, seharusnya anda akan melihat tampilan seperti di bawah ini.

Tapi, itu tidak memberikan posisi mouse yang tepat. Posisi yang diberikan clientX dan clientY adalah posisi berdasarkan posisi x dan y dari ujung halaman windows dan posisi dari dalam canvas. Untuk mendapatkan posisi mouse yang lebih tepat, gunakan getBoundingClientRect.

kanvas.onclick=function(e){            
    var bbox=kanvas.getBoundingClientRect();
    var x=e.clientX-(bbox.left*kanvas.width/bbox.width);
    var y=e.clientY-(bbox.top*kanvas.height/bbox.height);        
    
    alert("x="+x+"\ny="+x);
}

Sekarang kita akan mencoba membandingkan posisi mouse dengan posisi persegi untuk mengetahui apakah kita sudah melakukan klik di dalam persegi yang ada. Ubah onclick-nya jadi seperti di bawah ini.

kanvas.onclick=function(e){
    var bbox=kanvas.getBoundingClientRect();
    var x=e.clientX-(bbox.left*kanvas.width/bbox.width);
    var y=e.clientY-(bbox.top*kanvas.height/bbox.height);        
    
    if(x>=xpos && y>=ypos && x<xpos+lebar && y<ypos+panjang)alert("di dalam");
    else{
        alert("di luar");
    } 
}

Coba klik di dalam dan di luar dan di dalam persegi. Jika kalian meng-klik bagian dalamnya akan muncul tulisan "di dalam", dan jika yang diklik adalah bagian kanvas di luar persegi, maka kalian akan mendapatkan tulisan "di luar". Di bawah ini adalah kode HTML utuhnya.

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <TITLE>BELAJAR HTML</TITLE>
</HEAD>
<BODY>
    <CANVAS id="kanvas" width="400" height="400" style="background:blue">
        kanvas tidak dapat ditampilkan.
    </CANVAS>
    <SCRIPT>
    var xpos=150;
    var ypos=150;
    var panjang=100;
    var lebar=100;
    var kanvas=document.getElementById("kanvas");
    var ct=kanvas.getContext("2d");
    ct.fillStyle="red";
    ct.beginPath();
    ct.rect(xpos, ypos, panjang, lebar);
    ct.fill();

    kanvas.onclick=function(e){            
        var bbox=kanvas.getBoundingClientRect();
        var x=e.clientX-(bbox.left*kanvas.width/bbox.width);
        var y=e.clientY-(bbox.top*kanvas.height/bbox.height);        
        
        if(x>=xpos && y>=ypos && x<xpos+lebar && y<ypos+panjang)alert("di dalam");
        else{
            alert("di luar");
        }
    }
    </SCRIPT>
</BODY>
</HTML>

Kita bisa mencoba menerapkan hittest dengan cara lain, misalnya dengan mencari tahu apakah dua persegi bertabrakan atau tidak dengan persegi lainnya. Caranya adalah dengan membandingkan posisi tiap sudut persegi kedua dengan persegi pertama.