JsPDF derslerimize devam ediyoruz.Bu derste
çizgi,dikdörtgen,elips,daire ve
üçgen çizdirme komutlarını işleyeceğiz.Öncelikle tüm şekillerde kullanacağımız bazı komutları anlatarak başlayalım.
İndir : http://ustaderslik.com/dosya/jspdf-sekiller.rar
İncele : http://ustaderslik.com/ornek/jspdf-sekiller/
setDrawColor(r,g,b) : Çizgi rengini değiştirmek için.
setLineWidth(boyut) : Çizgi kalınlığı.
setFillColor(r,g,b) : Arka plan rengini değiştirmek için.
1-line(x1,y1,x2,y2)
Line belirlediğimiz
x1 ve
y1 den,
x2 ve
y2 konumuna bir çizgi çizer.Yukardaki komutlar ile boyut ve rengini değiştirebilirsiniz.,
2-rect(x,y,w,y,"style")
Rect belirlediğimiz
x ve
y den,w-h boyutunde bir dikdörtgen çizer.
w genişlik,
h yükseklik miktarı.Sondaki parametreyi girmek zorunlu değil.Sonuncu parametreyi girmezsek,sadece dış çizgiler görünür.Son parametreye
"F" girersek sadece arkaplanı olan bir dikdörtgen görünür.Son parametreye
"FD " girersek hem dış çizgiler hemde arkaplan görünecektir.
Eğer oval köşeli bir dikdörtgen çizdirmek istersek
roundedRect(x,y,w,h,r,r,"style") bu komutu kullanabilirsiniz.Ek olarak 2 tane radius yani ovallik parametresi mevcut.Diğer parametreleri aynı şekilde.
3-ellipse(x,y,r1,r2,"style")
Ellipse ile belirlediğimiz konumda elip çizmemizi sağlar.
r1 yatay yarıçapı,
r2 dikay yarı çapı.Style parametresi zorunlu değil.F yazarsak arkaplan FD yazarsak hem arkaplan hemde dış çizgiler görünür.
4-circle(x,y,r,"style")
Circle ile belirlediğimiz komunda
r yarı çapında bir daire çizdiririz.Style parametresi işlevi yukarıdakilerle aynı.
5-triangle(x1,y1,x2,y2,x3,y3,"style")
Triangle ile belirlediğimiz 3 konumarasında çizgiler çekerek bir üçgen çizer.Style parametresinin işlevi yukarıdakilerle aynı.
Şekillerimiz bu kadar.
Genek örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
$(function(){
var pdf = new jsPDF();
//Çizgiler
pdf.setDrawColor(190,45,45)
pdf.setLineWidth(0.2);
pdf.line(10, 10, 10, 35);
pdf.line(15, 10, 25, 35);
pdf.setLineWidth(1.5);
pdf.line(30, 10, 200, 10);
pdf.line(30,35,200,35);
//Dikdörtgenler
pdf.setDrawColor(170,170,170)
pdf.setLineWidth(1);
pdf.rect(10,45,50,50);
pdf.setFillColor(235,235,235);
pdf.rect(65,45,75,50,"F");
pdf.setLineWidth(0.5);
pdf.rect(145,45,50,100,"FD");
pdf.roundedRect(145,155,50,100, 5,5, 'FD');
//Elipsler
pdf.setDrawColor(45,130,145)
pdf.setFillColor(45,158,190);
pdf.setLineWidth(2);
pdf.ellipse(35,125,25,15);
pdf.ellipse(35,160,25,15,"F");
pdf.ellipse(35,195,25,15,"FD");
//daireler
pdf.setFillColor(255,222,0);
pdf.setDrawColor(210,187,37)
pdf.circle(100,125,25);
pdf.circle(100,180,25,"F");
pdf.circle(100,235,25,"FD");
//Üçgenler
pdf.setFillColor(0,255,30);
pdf.setDrawColor(42,192,60)
pdf.triangle(10,220, 50,220, 30,250);
pdf.triangle(10,295, 50,295, 30,260,"F");
pdf.triangle(30,255,70,220,70,290,"FD");
var yazdir = pdf.output('datauristring');
$('#onizleme').attr("src",yazdir);
})
</script>
</head>
<body>
<iframe id="onizleme" type="application/pdf" style="width:100%;height:900px;" frameborder="0"></iframe>
</body>
</html>
UstaDerslik
