Html5 canvas Frameworkler ve fabricjs dersi.

Arif Ceylan/ Ocak 3, 2015/ HTML/ 0 comments

Html5 canvas javascript frameworkler.

Html5 canvas ile şekil çizme, maskeleme, koordinatlar vs. gibi yazıları daha önce yazmıştım. Daha da ilerisine gidip sürükle bırak uygulamalar, animasyonlar, oyunlar yapmak istiyorsanız html5 canvas-js üçlüsü sizi biraz zorlayabilir. Bu etapta işinizi kolaylaştırmak için yazılmış hazır frameworkler var. Kineticjs, fabricjs, paperjs, createjs bunlardan bazıları. Kineticjsi daha önce uygulamalarımda kullandım ama şu an kineticjse destek veren yapı her neyse desteğini kesmiş durumda. Createjs ve paperjs de gayet kullanışlı ve güzel frameworkler. Sitelerine girip örneklerine bakabilirsiniz. Adobe Flash CC ile artık html5 canvas animasyonları/uygulamaları da yapılabilmekte. O da arkaplanda createjs frameworkünü kullanıyor.

Fabric jsde sürükle bırak, boyutlandır, çoğalt, animasyon oluştur gibi kolay yapılar var. Bu sebeple şimdilik biraz fabricjse değineceğim.

Fabricjs ile ilgili örneklere ve tutoriallere kendi sitelerinden erişebilirsiniz. fabricjs.com

Sitelerinin ana sayfasında canvas içerisine eklenen nesneler var. Sürükleyebilir, boyutlandırabilir, çevirebilirsiniz. Ayrıca animasyon, gruplandırma, maskeleme gibi örnekler de var. Aslında fabricjs kullanılarak photoshop benzeri uygulamalar hazırlamak bile mümkün.

Fabricjs ile hazırlanmış örnek sitelerden bazıları

http://printio.ru/tees/new

tişörtü kendiniz tasarlayıp sipariş verebiliyorsunuz. Metin ekle/resim ekle boyutlandır vs. gibi seçenekler var.

Başka bir demo

http://demo.memoriallabs.com/

Alttaki linkte de resim ekleyip bıyık, sakal ekleyebileceğiniz bir site mevcut.

http://mustachified.com/

Fabricjs ile yapılmış bir tetris oyunu

http://end3r.com/games/fabrictetris/

html5 fabricjs kullanılarak yapılan bir uygulama. Android hybrid uygulama.

https://play.google.com/store/apps/details?id=com.designapp.designapp

https://designapp.io/about

sitesi de üstte.

Fabricjs kullanımı ders 1

fabricjs için aşağıdaki script dosyalarını ekleyebiliriz.

Fabricjs ile bir canvasa bir dikdörtgen çizelim. script dosyalarımızı ekleyip, bodu tagi içerisine eklediğimiz <canvas id=”canvasarif”></canvas> canvas etiketine dikdörtgen çizimi için ekleyeceğimiz javascript kodları aşağıdadır.

http://liveweave.com/vbFqbF

Dörtgenimizi çizdikten sonra dörtgeni kod ile çevirmek istiyoruz diyelim. Sadece bir özellik ve değer eklemek yeterli.

http://liveweave.com/MNnASg

Dörtgen gibi birçok nesneyi ekleyebiliriz. Ekleyebileceğimiz nesneler;

fabric.Circle

fabric.Ellipse

fabric.Line

fabric.Polygon

fabric.Polyline

fabric.Rect

fabric.Triangle

canvasa resim ekleme örneği

http://liveweave.com/dH1Z3O

Yazı ekleme

http://liveweave.com/rLZwIZ

nesneyi boyutlandırma, taşıma, çevirme

Nesneleri eklediğinizde boyutlandırmaya taşımaya çevirmeye izin vermektedir. Bunları da hascontrols, selectable, hasborder gibi özellikleri ile kontrol edebilirsiniz. Aşağıdaki linkteki örnekte dörtgeni taşıyıp boyutlandırabileceğinizi göreceksiniz. liveweavede sorun yaşadığım için codepende yaptım.

 

http://codepen.io/anon/pen/raWzPq

Leave a Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">
*
*