JsPDF Ders-2 şekiller
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

JsPDF Ders-2 şekiller

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2117)
RAPOR ET
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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol