Atöyle çalışması-5(Doğrusal çizim uygulaması)


    Evet geldik bir başka fare hareketlerini izleyerek gerçekleştirdiğimiz uygulamaya; bu uygulamada farenin ekran üzerindeki konumlarını sürekli izleyeceğiz, kullanıcının tıklama yapıp yapmadığını kontrol edeceğiz şayet bir tıklama yapmış ise tıklama yaptığı konumu başlangıç noktası kabul edeceğiz ve farenin sol tuşunun serbest bırakılıp bırakılmadığını kontrol edeceğiz, kullanıcı farenin sol tuşunu bıraktığında bu defa bu konumu bitiş noktası kabul ederek iki nokta arasında düz bir doğru parçası çizdireceğiz. Bu işlermleri yaparken de sadece ve sadece < div > nesnesini kullancağız. Aslında bakarsanız aynı işlemi HTML5 elamanı olan < canvas > < / canvas > kullanılarak yapılabilir. Yani çizimlerinizi bu nesne üzerine yaptırabilirsiniz ben tercih etmedim o kadar. Gelelim bir diğer noktaya neden bas bırak ile çim yapıyorum çünkü bana göre kullanması daha kolay lakin buradaki kodları kullanarak sizler farklı iki tıklama arasında da aynı işlemi yaptırabilirsiniz. Çalışmada:

  1. Çizim yapılan alan bir  < div > nesnesidir,
  2. Fareye balğlı olarak hareket eden yatay ve dikey eksenler birer < div > nesnesidirler
  3. Aynı şekilde farenin ekrandaki konumunu gösteren gösterge kutusu bir < div > nesnesidir
  4. Hatta tıklama ve bırakma noktaları arasında çizim yapılırken kullandığım noktalar da birer < div > nesnesidir.

Bu arada belirtmeden geçemeyeceğim ne yazık ki bir doğru parçası çizebilmek için bir miktar analitik geometri bilgisine ihtiyacınız var, mesela iki noktası bilinen bir doğru denklemi, doğrunun eğimi, doğru parçasının uzunluğunu hesaplama vb. Bunu yanında doğru eğimi sonuçta tan() olarak bildiğimiz bir trigonometrik fonksiyon bunu da öğrenmenizde fayda var "Hatta hangi açının tanjantı şu eder?" gibi bir soruya cevap verebilmek için ters trigonometrik fonksiyon olan arctan()' ı bilseniz fena olmaz. Bilmiyorsanınz ne olur? O zaman buradaki bazı kodlar size anlamasız gelecektir. Özetle matematik yazılım dünyası için olmazsa olmazlardandır. Uygulamamızın ekran görüntüsü aşağıdaki gibi olacaktır.

Bu görüntüyü elde edebilmek için yeni bir web sayfası oluşturuyor ve aşağıda verdiğim HTML kodlarını yazıyoruz, görüldüğü üzere oldukça kısa ne olsa çizim yapılacak bir alan, iki adet eksen (x,y) çizgisi ve farenin konumunu gösteren bir gösterge kutusundan ibaret bir sayfa. Burada konumAl() fonksiyonu ile tıklama ve bırakma yapılan konumların bilgileri okunmaktadır. eksenler() fonksiyonu ise x ve y eksenlerini farenin hareketine göre ekranda gezdirme işini yapar.

< body >
< div id="govde" onMouseDown="konumAl(0)" onMouseUp="konumAl(1)" onmousemove="eksenler()" >
< div id="eksenX" >< / div >
< div id="eksenY" >< / div >
< div id="gosterge" >< / div >
< / div >
< / body >

Sayfayı biçimlendirirken kullandığım css kodları işe aşağıdaki gibidir. Burada .kalem olarak isimlendirdiğim sınıf çizim kalemini temsil ediyor yani kalemin rengi ve çizgi kalınlığı bununla ayarlanıyor. Ayrıca yatay ve dikey eksenler eksenX ve eksenY  olarak adlandırılan biçimlendirmelerdir.

<style type="text/css">
body{
margin:2px;
}
#govde{
width:100%;
height:100%;
border:2px solid red;
z-index=500;

}
.kalem{
width:2px;
height:2px;
background-color:blue;
}
.gri{
width:1px;
height:1px;
background-color:#eee;		
}
#eksenX{
position:absolute;
left:10;
top:500;
height:2px;
width:99%;
background-color:#eee;
}
#eksenY{
position:absolute;
left:500px;
top:10px;
height:99%;
width:2px;
background-color:#eee;
}	
#gosterge{
font-family:tahoma;
font-size:10px;
text-align:center;
border:1px solid #eee;
color:#ccc;
position:absolute;
}	
< / style>

Son olarak sayfamızın tam olarak işlevini yerine getirmesi için yazılması gereken JavaScript kodlarına. Kodlar ve bunlara ait açıklamalar aşağıdaki gibidir. İş bittiğinde buna benzer bir web sayfanız olacaktır. Şİmdidien sizlere kolay gelsin :)

< script language="javascript" type="text/javascript">
var durum=true;
var basX=0,basY=0,bitX=0,bitY=0;
function cizgiCiz(){
////////////////////////////////////////////////////////////////
// Kodlama			: Bilal SERT
// Tarih-Saat		: 10.10.2019 | 10:10
// Amaç				: Rasgele bicimlendirilmis < div> eklemek
// G/Ç				: yok
// Çağrıldığı yer	: 
////////////////////////////////////////////////////////////////
//dogrunun uzunlugunu bulalim
var lenX=Math.abs(bitX-basX);
var lenY=Math.abs(bitY-basY);
var sayac=0;
var kod="";
//aciyi her zaman pozitif aliyoruz
var radAci=Math.abs(Math.atan((bitY-basY)/(bitX-basX)));
uzunluk=Math.floor(Math.sqrt((lenX*lenX)+(lenY*lenY)));
//innerHTML olarak nesneye ekleme yapmiyoruz cunku HTML
//etiketleri tarayici tarafindan otomatik tamamlaniyor tarayici  < div>
//etiketini okuyunca < / div > etiketini otomatik olarak ekliyor. Bunu engellemek
//icin eklemek istedigimiz etiketi tum css bilgileri ile string degikende saklayip
//sonrasinda innerHTML ile ozelligine aktariyoruz.
kod="";
for(sayac=0;sayac< uzunluk;sayac++){
	kod+="< div class='kalem'";
	if(bitX>basX){
		kod+=" style='position:absolute; left:" + (basX+(sayac*Math.cos(radAci))); 
	}else{
		kod+=" style='position:absolute; left:" + (basX-(sayac*Math.cos(radAci))); 
	}
	if(bitY>basY){
		kod+="; top:" + (basY+(sayac* Math.sin(radAci))) + "'>< \/ div >";
	}else{
		kod+="; top:" + (basY-(sayac* Math.sin(radAci))) + "'>< \/ div >";
	}			
	
}//for
document.getElementById("govde").innerHTML+=kod;
}//end of nesne ekle		

function konumAl(islem){
////////////////////////////////////////////////////////////////
// Kodlama			: Bilal SERT
// Tarih-Saat		: 11.10.2019 | 14:10
// Amaç				: fare ile tiklama yapilan noktanin yatay
//                    dikey koordinat bilgilerini okumak
// G/Ç				: yok
// Çağrıldığı yer	: govde.onmousedown()
////////////////////////////////////////////////////////////////
if(islem==0){
	basX= window.event.clientX;
	basY= window.event.clientY;
	document.getElementById("govde").style.cursor="pointer";
	document.getElementById("gosterge").style.visibility="visible";
}else if(islem==1){
	bitX= window.event.clientX;
	bitY= window.event.clientY;
	cizgiCiz();
	document.getElementById("govde").style.cursor="default";
	document.getElementById("gosterge").style.visibility="hidden";
}//if
}//end of konumAl

function eksenler(){
////////////////////////////////////////////////////////////////
// Kodlama			: Bilal SERT
// Tarih-Saat		: 11.10.2019 | 13:58
// Amaç				: fare konumuna gore x ve y eksenlerini
//                    ekranda hareket ettirmek
// G/Ç				: yok
// Çağrıldığı yer	: govde.onmousemove()
////////////////////////////////////////////////////////////////
document.getElementById("eksenY").style.left= window.event.clientX;
document.getElementById("eksenX").style.top= window.event.clientY;
document.getElementById("gosterge").style.left=window.event.clientX-80;
document.getElementById("gosterge").style.top=window.event.clientY-20;
document.getElementById("gosterge").innerHTML="x:" + window.event.clientX +" y:" + window.event.clientY;			
}//end of baslatDurdur

< /script>