JSX Graph Kütüphanesi Kullanımı ve Örnekleri

  • 21.10.2016
  • M.Tayyip Yetiş
  • Eklenti ve Kütüphaneler

Merhaba arkadaşlar bu makalede yine güzel bir javascript kütüphanesinden bahsedeceğim. Yaklaşık 4 yıl önce eski bir geometri öğretmenim benden kendisi için bir masaüstü programı yapmamı istemişti. İstediği şey geometri sorularını kolay ve pratik bir şekilde hazırlayabileceği bir yazılımdı ve o dönem benim masaüstü uygulamalarında grafik bilgim yok denecek kadar azdı WPF konusunda yeterince bilgim yoktu hatta uygulamayı vb6.0  üzerinde yazmaya çalışmıştım. Ortaya çıkan şey pek de çizim programına benzemiyordu yapabildiği sadece sayfaya bir çember bir çizgi, yamuk, paralelkenar ve üçgen çizmek ve bunları köşelerinden tutup süreklemek ve boyutlandırabilmekti çok kullanışlı değildi, doğal olarak sonu gelmedi ve arşivimdeki yerini aldı.

O tarihten sonra bilgisayar ile çizim alanında pek araştırma veya çalışma yapmadım ama aklımın bir köşesinde hep böyle bir şey yapmak vardı. Sonunda geçenlerde internette başka bir şey ararken karşıma bu kütüphane çıktı biraz kurcaladım dökümanlarını araştırdım ve sonunda kullanışlı bir kütüphane olduğuna karar verdim ciddi manada bir çalışma yapmasam da bir kaç adet örnek yapıp blog yazısı halinde paylaşmak istedim. Masaüstü olmasa da web tabanlı olarak güzel çizimler yapmaya olanak sağlayan kütüphanemizin adı JSX Graph. Beyrut Üniversitesi tarafından geliştirilen kütüphanenin resmi sitesine buradan ulaşabilirsiniz.

Bana göre oldukça profesyonel hazırlanmış ve kendisini kullanacak kişilerin çoğu ihtiyaçlarını düşünüp ona göre düzenlenmiş bir kütüphane ve en büyük özelliklerinden birisi sadece çizim yapmakla kalmayıp çizim tahtası ile interaktif olarak etkileşime geçmenize olanak vermesi yani alana eklenen geometrik şekilleri imleç ile tutup sürükleyebiliyor, yeniden boyutlandırabiliyorsunuz hatta event kullanımını bile destekliyor click, mouse move gibi olayları yakalayabiliyorsunuz. Bunun yanında yaptığınız çizimleri SVG veya Canvas metotlarıyla çizmenize imkan verdiğinden resim olarak kaydedebiliyorsunuz.

Fazla uzatmadan ilk örneklerimizi yapalım. Aşağıdaki örnekte temel işlemlerden birisi olan çalışma tahtasını oluşturalım

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:600px;"></div>
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,10,5,-2], axis:true});
</script>

 

Aşağıdaki örnekte çalışma tahtasına bir çember ekleyelim

 

Aşağıda çalışma tablosuna bir çizgi ekledik.

var b = JXG.JSXGraph.initBoard('jxgbox');
var p1 = b.create('point',[-1,4], {name:'A',size:4});
var p2 = b.create('point',[2,1], {name:'B',size:4});
var li2 = b.create('line',[p1,p2], 
 {straightFirst:false, straightLast:false, strokeWidth:2});

Aşağıda çalışma tahtasına hem bir üçgen hem de açı ekledik

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-2,2,2,-2]});
var A = brd.create('point', [-1,0.2]),
    B = brd.create('point', [1,0.2]),
    C = brd.create('point', [0,2]),
    alpha = brd.create('angle', [B,A,C], {type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5}),
    beta = brd.create('angle', [C,B,A], {type:'sector', orthoType:'sectordot', orthoSensitivity:2, radius:0.2});
var li3 = brd.create('line',[B,A], {straightFirst:false, straightLast:false, strokeWidth:2});
var li2 = brd.create('line',[B,C], {straightFirst:false, straightLast:false, strokeWidth:2});
var li1 = brd.create('line',[A,C], {straightFirst:false, straightLast:false, strokeWidth:2});

Bu makalede bu kadar örneğin yeterli olduğunu düşünüyorum. daha fazla örnek için resmi dökümantasyon sitesini ziyaret edebilirsiniz. Bence faydalı bir konu umarım sizin için de öyledir. Başka makalelerde görüşmek üzere esen kalın.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap