HTML5 Tuval'e SVG'lerde Diyagramlar Tuval

Bazı elemanlar tıklattığımda, çizgilerle bağlantılı yuvarlatılmış dikdörtgenler ve JavaScript eylemlerinden oluşan diyagramlar çizmem gereken bir proje başlatmak istiyorum. Bunun tüm modern tarayıcılarda çalışması gerekiyor.HTML5 Tuval'e SVG'lerde Diyagramlar Tuval

Hem SVG hem de HTML5 Canvas, bunu yapabiliyor gibi görünüyor, bu yüzden en iyisinin ne olacağını merak ediyorum.

Ayrıca tekerleği yeniden icat etmek istemiyorum, eğer böyle şeyler yapan kütüphaneler varsa bilmek isterim; Raphaël ve diğer bazı çizim kütüphanelerine baktım ama ihtiyaç duyduğum tüm işlevselliği vermiyorlar. Google’ın API'sinde böyle bir araç var ancak çok sınırlıdır. — bir şekilde muhafaza mod API — çizim çünkü

kaynak

2012-04-25 peter

Ne tür diyagramlar? Tam olarak ne kadar büyük? Kütüphanelerin şu anda sahip olmadığı ne tür bir işlevsellik arıyorsunuz? –

boyutu ayarlanabilir olmalıdır, diyagram bir şecere programı için – peter

Eğer ben olsaydım, svg ile giderdim ve backbone.js gibi bir şey ile inşa eder, böylece nesneleriniz için şablonlar oluşturabilir ve yine de etkileşimde bulunabilirsiniz. – RGB

Kullanım SVG belirli elemanları doğrudan olay dinleyicileri ekleyebilir ve belirli elementlerin özelliklerini değiştirmek ve sayfa sihirli güncelleme olabilir. Dahası, vektör tabanlı bir format olarak, çözünürlükten bağımsızdır.

HTML5 Tuval karşılaştırması, non-retained-mode (aka acil mod) çizim API'sidir; çizdiğiniz her piksel, orijinal şekle ait hiçbir kavram olmaksızın, tuvaldeki diğer tüm piksellerle harmanlanır. Ayrıca, raster tabanlı bir format olarak, farklı ekran boyutlarını ayarlamak için çizim komutlarını almak için fazladan bir çalışma yapmanız gerekir.

Genelde , sadece ihtiyacınız varsa ve eğer Tuval kullanmalısınız: piksel

Doğrudan ayarı (örneğin bulanıklık, ışıltılı efektler) veya
(örneğin bir okuma piksel alma Doğrudan kullanıcının çizimin bir PNG, sampling portions of the image to detect visual overlaps) olarak kaydedebilir veya fazla hareket veya bireysel olayları (SVG nesneleri binlerce yeniden çizmek için yavaş olabilir) izlemez 'nesnelerin' arasında
masif numara için.

Ayrıca, yalnızca birini veya diğerini seçmek zorunda olmadığınızı unutmayın. Tuval üzerine SVG çizebilirsiniz. SVG'ye bitmapler (resimler) ekleyebilirsiniz. Hatta SVG'ye HTML5 Canvas'ı <foreignElement> aracılığıyla ekleyebilirsiniz. Birden çok katmanlı tuvallere ve şeffaf arka planlı SVG elemanlarına sahip tek bir HTML sayfanızın her birinin çıktısını karıştırabilirsiniz.

kaynak

2012-04-25 18:50:09 Phrogz

Teşekkürler Phrogz, ama ben emin değilim eğer etkileşim benim bağlayıcılar ile bir düğüm eklemek ve yenilemek ya da tüm SVG yeniden canlandırmak için sunucuya gidiş dönüş yapmak sonucu izin verir emin değilim .. – peter

@peter JavaScript değiştirebilir uçta SVG DOM, manipülasyon ve düğümleri ekleyerek (tıpkı HTML'de olduğu gibi). Web tarayıcısı görünümü otomatik olarak uygun şekilde yeniden çizer (tıpkı HTML'de olduğu gibi). Tuvalde, aksine, bir öğenin "taşınması", tüm çizim komutlarının temizlenmesi ve yeniden yayınlanmasını gerektirir. Bu, sizin için sanal nesneleri koruyan bir kütüphaneyle "zor" değildir. Düzenlememe bak. – Phrogz

@ peter, phrogz üzerinde haklısınız, sen jvascript ile html işlemek gibi svg manipüle edebilirsiniz ... ayrıca neden backbone.js kullanabilirsiniz! :) – RGB

HTML5 Tuval'e SVG'lerde Diyagramlar Tuval

cevap

İlgili konular