Tuvali kullanarak yeni bir proje başlattım. Ama ihtiyacım olan şeylerden biri, bu örnekte olduğu gibi, hareketli, tıklanabilir kutuları takip etmektir: http://raphaeljs.com/graffle.html bu yüzden Raphael-js + SVG'nin daha iyi olup olmayacağını merak ediyorum.HTML5 Canvas vs SVG + Raphael.js'in avantajları ve eksileri nelerdir?
Hangisini kullanırsınız? Ve neden?
Bu cevap cevabımdan başka bir soruya kopyalanır. Ancak OP daha sonra soruyu değiştirdi ve bu nedenle bu cevap onunla daha az alakalı hale geldi. o kadar burada bu soruya daha alakalı IMHO gider: (OSS millet veya Gimp ve Inkscape) Photoshop ve Illustrator betwee fark olarak kanvas ve svg arasındaki farkın
düşünün. Bir bitmapler ve diğer vektör sanatı ile ilgilenir.
Kanvas ile, bitmap ile çizim yaptığınızdan, görüntüyü kolayca kırpabilir, bulanıklaştırabilir, yanabilir ve atlayabilirsiniz. Ancak bitmap olduğundan kolayca bir çizgi çizemezsiniz ve sonra çizgiyi yeniden konumlandırmaya karar verebilirsiniz. Eski çizgiyi silmeniz ve sonra yeni bir çizgi çizmeniz gerekir.
svg ile, vektörleri çizdiğiniz için çizimleri kolayca taşıyabilir, ölçekleyebilir, döndürebilir, yeniden konumlandırabilir, döndürebilirsiniz. Ancak vektörler olduğu için kenarları çizgi kalınlığına göre kolayca bulanıklaştıramaz veya kırmızı bir daireyi kesintisiz olarak mavi bir kareye dönüştürebilirsiniz. Nesneler arasında ara çokgenler çizerek bulanıklığı simüle etmelisiniz.
Bazen kullanım durumları üst üste biner. Örneğin, birçok insan basit çizgi çizimleri yapmak için tuvali kullanır ve nesneleri javascript'te veri yapıları olarak izler. Ama gerçekten, ikisi de farklı amaçlar sunuyorlar. Tuval üzerinde saf javascript genel amaçlı vektör çizim yapmaya çalışırsanız, büyük olasılıkla svg kullanarak daha hızlı olacağından şüphe duyarsınız. Bu, büyük olasılıkla, svg kullanmaktan daha hızlı olacaktır. Bu, muhtemelen daha iyi uygulanacak olan svg'yi kullanmaktan daha çabuk olacaktır.
Geçiş yolları, örneğin daire -> mavi kare (şekilleri yol öğeleri olarak temsil edecek olsanız da) yapmak oldukça mümkündür. Svg'nin de filtreleri olduğunu unutmayın, bir bulanıklık eklemek svg dosyasında bir öznitelik ve filtre tanımı eklemekten daha zor değildir. –
@Erik: Ben morphing hakkında konuşmuyorum.Birbirine karışan şekilleri karıştırmaktan bahsediyorum. Örneğin, mavi bir kareye karışan kırmızı bir dairenin (animasyon, statik resim değil) bir resmi, harmanlandığı noktada mor renge sahip olacak ve kenarlar organik olarak birbirlerine doğru olacaktır. Bu, Photoshop'ta ve bulaşma aracında basittir ancak Illustrator'da yapılması daha zordur. – slebetman
@Erik: Ayrıca, sadece filtreler kullanarak hattın kalınlığına bağlı olarak bulanıklık derecesini değiştirmek çok zordur. Birden çok filtre kullanarak mümkün olabilir, ancak kesinlikle önemsizdir. – slebetman
Karar vermeniz gereken birkaç şey - mobil tarayıcılarda çalışabilir misiniz? SVG (Raphael) android üzerinde çalışmayacak (iphone hakkında bilmiyorum). Tersine, Internet Explorer'ın eski sürümleriyle çalışacak bir şey istiyorsanız, tuval çalışmayabilir (ExCanvas'ın IE6'yı destekleyip desteklemediğinden emin değil), ancak SVG bir ölçüde yapar (Raphael, IE6'yı destekler). Ayrıca
, sadece animasyonlar/çizim yapıyoruz, yoksa tam bir oluşturuyorsanız vb düğmeler, sürgü, sekme kapları, listeler, ızgaraları gibi şeyler gerekebilir tam gaz uygulaması,
yapıyoruz http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/
dojox.gfx birkaç arka uçları destekleyen bir vektör grafik kütüphanesi: app ve sen, dojo araç kontrol özellikle dojox.gfx ve diğer grafik dojox kütüphaneleri olabilir, çok hareketli şeyler üzerinde çalışmak istediğiniz tuvali SVG, hatta gümüş ışığı. http://www.lrbabe.com/?p=217
Kontrol dışarı da Tuval için tek başına bir sahne grafik kütüphanesi için cake.js: http://code.google.com/p/cakejs/ Ve ayrıca processingjs kontrol İşte raphael ile karşılaştırarak bir makale.
Ah ... bilmeniz çok yararlı: Android SVG/Raphael'i desteklemiyor. – interstar
ExCanvas, IE6'yı destekliyor, ancak dikkat, tüm Canvas işlevlerini kapsamaz. Android, gelecekteki sürümde SVG'yi destekleyecektir. iPhone/iPad, SVG'yi destekliyor IE, sürüm 9'a kadar SVG'yi desteklemiyor. –
Ayrıca, işaretlediğiniz makale bir yıldan eski, dolayısıyla güncel değil. –
RaphaelJS * sadece * SVG değildir ve dolayısıyla Canvas içermeyen tarayıcılarda (yani, IE için Canvas emulator olsa da) çalışır. – Ken