2010-06-14 24 views
5

Sto usando Raphaël.js per disegnare dei cerchi piccoli (raggio di 2-4px), che viene eseguito tramite SVG su tutti i browser tranne IE. I cerchi non mi sembrano perfetti, quindi la mia domanda è:Antialiasing, web SVG e Raphaël.js

  1. C'è un modo per aggiungere l'antialiasing a Raphaël.js?
  2. Eccetto, c'è un modo per antialias oggetti SVG?
+0

SVG guarda antialiased a me qui. Puoi fare un esempio? Quale browser? E le altre immagini SVG (come su Wikipedia) sembrano antialiasate? – Ken

+0

Mi chiedo il problema è causato dal browser. – Zeal

+0

Non si tratta di questo? http://stackoverflow.com/questions/11879836/firefox-not-anti-aliasing-scaled-background-svg – Offirmo

risposta

2

In ulteriori esperimenti, Credo il problema non è tanto che lo SVG non antialias (anzi, ho trovato quando disegno di linee che di solito voluto disabilitare antialiasing impostando shapeRendering per crisp-edges, vedi this issue) come che volevo bordi ancora più morbidi sui miei cerchi rispetto all'antialiasing fornito.

Per ottenere questo risultato in Raphaël.js, è possibile impostare separatamente i colori fill e stroke. Ad esempio, su uno sfondo bianco, l'impostazione di stroke su un colore più chiaro rispetto a fill ottiene l'effetto desiderato.

+0

la risposta qui sotto è migliore (ho provato entrambi) - ps. Corel usa lo stesso metodo per rendere l'oggetto nitido come menzionato da musefan –

0

L'antialias viene eseguito tramite il renderer SVG, quindi è necessario controllare il client che mostra SVG. Il problema, tuttavia, è che ciò che stai disegnando è troppo piccolo per essere efficacemente antialias. Se hai un cerchio con raggio 2px, è praticamente come un diamante perché è il più vicino che puoi ottenere in un cerchio di quelle dimensioni. Il primo pixel di raggio è utilizzato per il nucleo del cerchio, il secondo pixel utilizzato per dare un po 'di arrotondamento, ma è così piccolo che sembra un diamante.

L'anti-aliasing ha bisogno di alcuni pixel aggiuntivi con cui lavorare e forme così piccole non forniscono molto. A meno che non si ridimensionino le immagini, esse non avranno antialiasing.

6

Mi sono imbattuto in questo post cercando anche una risposta. Dopo aver provato a impostare il tratto con un colore più chiaro, ho scoperto che lo faceva sembrare sfocato.

Tuttavia, se si imposta il tratto su "nessuno" come di seguito, fa una grande differenza nella levigatezza dei bordi.

var circle = paper.circle(50, 40, 20); 
    circle.attr("fill", "#F00"); 
    circle.attr("stroke", "none"); 
0

Ho testato solo questo in Safari 6, ma l'aggiunta di un colpo di antialiasing dello stesso colore sembrava aiutare:

<polygon fill='blue' stroke='blue' stroke-width='3' stroke-antialiasing='true' … >