GOOD LOOKING (Flash'ta olduğu gibi) çizim çizgileri (HTML5) - mümkün mü?

Flash'taki gibi "daha iyi" antialiasing ile javascript ve tuval kullanarak bir çizgi çizmenin bir yolu var mı?GOOD LOOKING (Flash'ta olduğu gibi) çizim çizgileri (HTML5) - mümkün mü?

İhtiyacınız olduğunda tam olarak 1 piksel çizgisi elde etmek için Math.floor (kordinat) +0.5 numarasını biliyorum, ama demek istediğim bu değil. Aşağıdaki mavi çizgiler, html5 ve cavas'ı destekleyen tüm tarayıcılarda belgesinde tuval görünümünü kullanarak çektiler. Bu nedenle, muhtemelen aynı hatalı antialiasing algoritmasını kullanıyor (muhtemelen en iyi görsel gösterim için değil, hız için kodlanmış).

1px mavi çizgiler ekran görüntüsü kırpma:

ve 3px:

olursanız çizgi genişliği (aslında daha kalın, daha çirkin) ne aynısı Gördüğünüz gibi, bu iyi antialiased çizgiler çizmek için en güzel yol değil, ve sadece alt çizgi iyi görünüyor. İstemci üzerinde çalıştığım grafik manipülasyon uygulamasının "iyi görünmesi" gerektiğini ve estetik pov ve 'dan çok talep edilmesini talep ediyor. Bunu çözemediğim takdirde muhtemelen HTML5/Canvas çözümünü atlayıp Flash yoluna gideceğim sorun. Ya da belki de javascriptte iyi bir antialiased çizimleri çizebiliyordum (herkes bana bunun için biraz kaynak verebilir mi?) Flash'ta çizilen çizgilerle resim eklemediğim için üzgünüm, ama sadece iyi görünüyorlar, antialiasing doğru yapıldı.

kaynak

2010-11-14 NeuronQ

+11

Tüm kapaklar kullanıldığında insanların SHOUTING duyduklarını biliyorsunuz değil mi? Gerektiğinde, aksi halde ** kalın ** ve * italik * gibi makul miktarlarda kullanın, ancak TÜM CAPS sadece bir kapanmadır. Çirkin, söyleyebilirsin. –

FWIW, çiziminizden, gerçekten Canvas kullanmak isteyip istemediğinizi merak ediyorum. Vektörlerin daha uygun olabileceği anlaşılıyor. [RaphaelJS] (http://raphaeljs.com/) Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ ve Internet Explorer 6.0+ sürümlerinde SVG ve VML aracılığıyla güzel görünümlü çizgiler sunuyor gibi görünüyor. Bu, orada desteklenen iyi bir oluşturma motoru kümesi. Daha sonra, bir bitmap'e ihtiyacınız olduğunda bir tuvali (z sırasına yerleştirilmiş) kullanabilirsiniz. –

teşekkürler! Uygulamamın uygun olup olmadığını görmek için şu anda RaphaelJS'e bakıyorum ve kabul edilebilir performans açısından ... – NeuronQ

Marius'ın cevabını kapalı sülük: bu sadece DOM elemanları beri

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

<svg width="100%" height="100%" version="1.1" 
     xmlns="http://www.w3.org/2000/svg"> 

<rect width="100" height="50" y="37" 
style="fill:none;stroke-width:1; 
stroke:rgb(0,0,0)"/> 

<rect width="100" height="50" x="200" 
    style="fill:none;stroke-width:1; 
    stroke:rgb(0,0,0)"/> 

<line x1="50" y1="67" x2="250" y2="25" 
    style="stroke:rgb(0,0,255);stroke-width:2"/> 

<text x="2" y="50" >Beta</text> 
<text x="201" y="13" >Omega</text> 

</svg>

alt text

SVG, javascript ile istemci tarafında çizilebilir. Ve ileriye doğru, donanım hızlandırıldı.

kaynak

2010-11-14 22:04:23

Gerçekten işe yaramayacak kadar yavaş olmayan iyi görünmesini sağlayacak bir şey bulacağınızdan şüpheliyim. Performansı çok fazla etkilemeyecek denebilecek bir şey, birbiri üzerine yerleştirilmiş 4 satır çizmek, her biri x ve y'deki bir pikselin bir kısmıyla dengelenmektir. Dezavantajı biraz bulanık görünecektir.

kaynak

2010-11-14 19:36:47 rob

2B çizim API'sini kullanmak yerine SVG vektör elemanlarını kullanabilirsiniz. Bunu yapmak için kendi api'nizi uygulamanız gerekir, ancak bu şekilde flaştakiler gibi güzel çizgiler elde edersiniz. SVG-edit tarayıcıda SVN ile neler yapabileceğinize bir örnektir.

kaynak

2010-11-14 19:53:03 Marius

GOOD LOOKING (Flash'ta olduğu gibi) çizim çizgileri (HTML5) - mümkün mü?

cevap

İlgili konular