Paper.js ile HTML 5 Canvas Uygulamaları
Merhaba arkadaşlar;
Bugün sizlere beğenerek kullandığım bir Javascript kütüphanesi olan Paper.js den bahsetmek istiyorum. Paper.js, HTML 5 Canvas bileşenini kullanmak üzere kurulu bir grafik kütüphanesi. Açık kaynak kodlu olan Paper.js kütüphanesi ile, Vektör tabanlı grafik uygulamaları ve animasyonlar kolaylıkla gerçekleştirilebiliyor. Grafik çizimleri Vektör tabanlı olduğundan, Paper.js bileşenleri rahatlıkla SVG biçimine dönüştürülebiliyor ve aynı zamanda var olan SVG formatından, Paper.js üzerine yükleme gerçekleştirilebiliniyor.
Paper.js kütüphanesi, giriş noktasını paper değişkeni üzerinden sağlar. Bunu Jquery.js’ nin $ değişkenine benzetebiliriz. paper nesnesi doğrudan web tarayıcının global window nesnesine bağlanır ve tüm Paper.js nesne ve fonksiyonlarına bu paper değişkeni üzerinden erişim sağlanır.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Paper.js Örneği</title>
</head>
<body>
<canvas id="canvas" height="400" width="400"></canvas>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js"></script>
</body>
</html>
Paper.js’ nin Jquery kütüphanesine hiçbir bağımlılığı bulunmuyor, fakat el alışkanlığı neticesinde bir kez eklemiş bulundum. Aşağıda, yer alan Javascript kodları, id niteliği canvas olan, Canvas nesnesinin üzerinde çeşitli grafikler çizmektedir.
HTML 5 Canvas ile çalışırken, tüm DOM ağacının yüklenmiş olduğuna emin olunmalıdır, aksinde Canvas nesnelerini olağan bir şekilde kullanamayabiliriz.
// DOM ağacı hazır olduğunda
$(function(){ // window.onload= function(){ ... }; da kullanılabilir.
//document.getElementById("canvas"); da kullanılabilir.
var canvas = $("#canvas")[0]; // HTMLCanvasElement nesnesi elde ediliyor.
paper.setup(canvas); // HTMLCanvasElement nesnesi, paper kapsamına alınıyor.
var nokta=new paper.Point(250,50);
var alan=new paper.Size(80,80);
var dikdortgen=new paper.Path.Rectangle(nokta,alan);
dikdortgen.fillColor='black';
var daire=new paper.Path.Circle(new paper.Point(100,100),60);
daire.fillColor='red';
var guzergah=new paper.Path();
var p1=new paper.Point(10,10);
var p2=new paper.Point(390,10);
var p3=new paper.Point(390,190);
var p4=new paper.Point(10,190);
guzergah.add(p1);
guzergah.add(p2);
guzergah.add(p3);
guzergah.add(p4);
guzergah.style.strokeColor='blue';
var yazi=new paper.PointText(new paper.Point(90,270));
yazi.content="kodedu.com | teknolojileri öğrenmenize yardım eder.";
yazi.fillColor="grey";
var resim=new Image();
resim.src="https://kodedu.com/wp/wp-content/images/kodcu-logo.gif";
var raster=new paper.Raster(resim);
raster.position=new paper.Point(200,300);
paper.view.draw();
});
Paper.js’yi bir Canvas bileşenine adamak istiyorsak, paper#setup(..) metodu kullanılabilmektedir. Bu sayede mevcut paper nesnesi üzerindeki tüm operasyonlar, Canvas bileşenine de yansıtılmış olacaktır.
Şimdi sizlerle sık kullanılan birkaç Paper.js nesnesini tanıtmak istiyorum.
Point nesnesi
Point nesnesi, Canvas nesnesi üzerindeki bir koordinatı belirleyen, görünür bir gövde içermeyen Paper.js nesnesidir. Point nesnesine doğrudan, window.paper değişkeni üzerinden erişilebilmektedir.
Size nesnesi
Size nesnesi de, Point nesnesi gibi doğrudan paper değişkeni üzerinden erişilmektedir. Bu nesnenin görevi ise, belirtilen iki sayı kadar x ve y eksinde bir alan ayırmasıdır.
Rectangle, Circle
Bu nesneler paper.Path nesnesi üzerinden erişilmektedir. Bu nesneler, yer belirleme için Point, Alan belirmek için Size, yarıçap belirlemek için ise normal sayıları kullanmaktadır.
Path
Path nesnesi, bir düzlem üzerinde belirli noktalar arasında çizgiler çekmeye yaramaktadır. Diğer yardımcı nesneler olmasa bile, geometrik şekillerin her biri salt Path nesneleri üzerinden de oluşturulabilirdir.
PointText
Belirli bir noktaya, yazı ekleme özelliğine sahiptir.
Raster
Image nesneleriyle çalışmak için oluşturulan bir Paper.js nesnesidir.
Aşağıdaki örnek, biraz önce kodlarını paylaştığımız Paper.js uygulamasının canlı halini göstermektedir.
Paper.js kütüphanesinin diğer bir önemli nesnesi Tool nesnesidir. Bu nesnenin görevi ise, Maus ve klavye aksiyonlarını yönetebilmesidir. Bunun için aşağıdaki basit Paper.js paint uygulamasına göz atabilirsiniz.
Tekrar görüşmek dileğiyle.
You may also like
Swagger Nedir? Neden kullanılır?
Spring CLI ile Spring Boot Projeleri Hazırlamak
