Come disegnare la ruota dei colori nell'applicazione WPF?

Question

Ho iniziato a giocare con WPF e volevo disegnare color wheel su un modulo.

All'inizio ho provato ad utilizzare LinearGradientBrush su ArcSegment simili:

<Path StrokeThickness="35" Height="150" Width="150"> 
    <Path.Stroke> 
     <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
      <GradientStop Color="Red" Offset="0.15" /> 
      <GradientStop Color="Orange" Offset="0.2" /> 
      <GradientStop Color="Yellow" Offset="0.35" /> 
      <GradientStop Color="Green" Offset="0.5" /> 
      <GradientStop Color="Blue" Offset="0.65" /> 
      <GradientStop Color="Indigo" Offset="0.75" /> 
      <GradientStop Color="Violet" Offset="0.9" /> 
     </LinearGradientBrush> 
    </Path.Stroke> 
    <Path.Data> 
     <PathGeometry > 
      <PathFigure IsClosed="True" StartPoint="25,70"> 
       <ArcSegment Point="25,71" IsLargeArc="True" 
        Size="50,50" SweepDirection="Clockwise" /> 
      </PathFigure> 
     </PathGeometry> 
    </Path.Data> 
</Path> 

Senza successo, perché gradiente era ancora orizzontale.

Un'altra idea è quello che devo piegare in qualche modo dopo aver applicato il gradiente. Ma non riesco a trovare una trasformazione appropriata.

Se non esiste una trasformazione standard, è possibile effettuare una trasformazione personalizzata? O dovrei disegnare la ruota dei colori per pixel?

Qualsiasi idea, per favore.

Answer 1

This library has pixel shaders that draw color wheels

Esempio XAML:

<Ellipse Width="300" 
     Height="300" 
     Fill="White"> 
    <Ellipse.Effect> 
     <effects:HsvWheelEffect /> 
    </Ellipse.Effect> 
</Ellipse> 

Si noti che l'ellisse deve avere un insieme di spazzola su Fill per far funzionare tutto questo, può essere di qualsiasi colore.

Answer 2

Quello che stai cercando è un Path Gradient Brush. Purtroppo, non è ancora disponibile in WPF (ma è in GDI +). Forse in una versione futura ...

Ho un'idea su come ottenere una ruota dei colori approssimativa.

Una descrizione di alto livello di esso sarebbe utilizzare gradienti lineari (rettangoli) che vengono ruotati e tradotti per formare un poligono regolare il cui spessore è molto più ampio rispetto alla larghezza dell'anello desiderata. Quindi "ritaglia" una forma ad anello da questa e usala come ruota dei colori.

Una ruota colori ha diversi colori principali (rosso, verde, blu, giallo, ecc.). Dovrai prima definire la misura del grado da una linea base arbitraria. Ad esempio, il rosso è a 0 radianti, il blu è a più radianti, ecc. Definisci anche un raggio interno ed esterno dell'anello. Usando trig, si cammina intorno al rettangolo del disegno ad anello con una sfumatura lineare dal colore che si avvia al successivo colore adiacente. La larghezza del rettangolo dovrà essere maggiore della larghezza dell'anello (vedrai perché dopo) e il rettangolo dovrà essere ruotato per essere tangente al cerchio nel suo punto medio.

Una volta terminato si avrà un "poligono di colore" (un termine che ho appena composto). Quindi estrai una forma ad anello da questo poligono come fa un cutter con l'impasto. Ci sarebbe più di un modo per farlo. Semplicemente disegnando un cerchio pieno dal centro al raggio interno, lo sfondo si sbarazzerà della parte centrale. La parte esterna sarebbe più difficile. Non so se riuscirai a farlo in WPF, ma quello che dovresti fare è generare una maschera che sia un cerchio dal centro al bordo esterno dell'anello. Sarebbe un cerchio bianco su sfondo nero. È quindi "AND" con l'immagine per eliminare l'esterno del poligono.

Non perfetto, ma sembrerà ragionevole, sospetto. Un sacco di trig!

Answer 3

Ecco un altro esempio di silverlight: http://asyrovprog.host22.com/colorwheel.html. Il codice sorgente si trova qui: timeline.codeplex.com sotto licenza bsd.