11
votes

Dessiner des lignes de bonne recherche (comme en flash) sur toile (HTML5) - possible?

Y a-t-il un moyen de dessiner une ligne à l'aide de JavaScript et de la toile avec une antialiasing "meilleure", comme le flash fait?

Je connais le truc de Math.Floor (Coord) +0.5 pour obtenir une ligne exactement de 1 pixels lorsque vous en avez besoin, mais ce n'est pas ce que je veux dire. Les lignes bleues suivantes dessinées à l'aide de toile look _ugy dans tous les navigateurs prenant en charge HTML5 et Cavas, ils utilisent donc probablement le même algorithme d'antialiasing (probablement codé pour la vitesse, pas pour le meilleure impression visuelle). C'est la même chose, peu importe la largeur de la ligne (en fait le plus épais, le Lablier):

Capture d'écran bleu bleu de 1px:

texte alt

et 3px:

texte alt

Comme vous pouvez le constater, ce n'est pas la plus belle façon de dessiner de bonnes lignes antialiasées , et seule la ligne inférieure a l'air bien. Le client exige que l'application de manipulation graphique que je travaille sur doit "afavé" et est très exigeante de l'esthétique POV et je vais probablement dépenser la solution HTML5 / Toile et faire la voie flash Si je ne peux pas résoudre ce problème . Ou peut-être que je pourrais coder une bonne lignée antialiasée dessin d'algorith à JavaScript (quelqu'un peut-il me donner des ressources pour cela?) Désolé de ne pas ajouter de photo avec des lignes dessinées en flash, mais le but est qu'ils ont juste l'air bien, l'antialiasing est < em> fait droit .


5 commentaires

Vous savez que les gens entendent crier lorsque vous utilisez toutes les casquettes, non? Utilisez des quantités judicieuses de gras et italiques le cas échéant, mais toutes les capsules sont juste une éteinte. Moche, tu pourrais dire.


Fwiw, de votre dessin, je me demande si vous voulez vraiment utiliser de la toile du tout. Il semble que les vecteurs puissent être plus appropriés. RAPHELJS semble fournir des lignes jolies via SVG et VML sur Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ et Internet Explorer 6.0+. C'est un bon ensemble de moteurs de rendu soutenus là-bas. Vous pouvez ensuite utiliser une toile (superposée dans l'ordre Z) où / quand / si vous avez vraiment besoin d'un bitmap.


Merci! Je regarde à Raphaeljs en ce moment pour voir si cela correspond à mon application et c'est acceptable de performances ...


@ T.J. Crowder: Trouvez la façon d'ajouter Bac audacieux ou Italique à un titre Stackoverflow - alors vous pouvez critiquer


@Ian Boyd: La version de la question que j'ai commentée utilisait la totalité des bouchons dans le texte. Quant aux titres: Peut-être qu'il y a une raison l'emphase n'est pas autorisée? Et utiliser toutes les casquettes n'est pas la réponse?


3 Réponses :


3
votes

Je doute que vous allez trouver tout ce qui va le faire paraître vraiment bien qui n'est pas trop lent pour être utile. Une chose que vous pouvez essayer qui ne fera pas trop de mal aux performances consiste à attirer 4 lignes superposées les unes sur les autres, chacune décalée par une fraction d'un pixel dans X et Y. L'inconvénient est-il un peu flou.


0 commentaires

7
votes

Au lieu d'utiliser l'API de dessin 2D, vous pouvez utiliser les éléments vectoriels SVG. Vous devriez mettre en œuvre votre propre API pour le faire, mais de cette façon, vous obtiendrez de belles lignes, comme celles en flash. Le SVG-Edit est un exemple de ce que vous pouvez faire avec SVN dans le navigateur.


0 commentaires

5
votes

Leeching off de la réponse de Marius: xxx

text alt

SVG peut être tiré du côté du client avec JavaScript, car il s'agit d'éléments Dom. Et, aller de l'avant, il est accéléré du matériel.


0 commentaires