Come disegnare la ruota dei colori nell'applicazione WPF?

Question

Ho iniziato a giocare con WPF e volevo disegnare ruota dei colori su un modulo.

Inizialmente ho provato a usare LinearGradientBrush su ArcSegment in questo modo:

<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>

Non riuscito, perché il gradiente era ancora orizzontale.

Un'altra idea è cosa devo piegare la linea 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?

Qualche idea, per favore.

Answer 1

Questa libreria ha pixel shader che disegnano le ruote dei colori

Esempio di xaml:

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

Nota che l'ellisse deve avere un set di pennelli su Fill affinché funzioni, può essere di qualsiasi colore.

Answer 2

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

Answer 3

Quello che stai cercando è un Path Pennello sfumato . 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 questo sarebbe l'utilizzo di gradienti lineari (rettangoli) che vengono ruotati e tradotti per creare un poligono regolare il cui spessore è molto più largo della larghezza dell'anello desiderata. Quindi "ritaglia". una forma ad anello da questo e usarlo come ruota dei colori.

Una ruota dei colori ha diversi colori principali (rosso, verde, blu, giallo, ecc.). Dovrai prima definire la misura del grado da una linea di base arbitraria. Ad esempio, il rosso è a 0 radianti, il blu è a pi radianti, ecc. È inoltre possibile definire un raggio interno ed esterno per l'anello. Usando il trigantino, cammini attorno al rettangolo di disegno dell'anello con una sfumatura lineare dal colore che inizi al successivo colore adiacente. La larghezza del rettangolo dovrà essere maggiore della larghezza dell'anello (vedrai perché in seguito) e il rettangolo dovrà essere ruotato per essere tangente al cerchio nel suo punto medio.

Una volta terminato avrai un "poligono di colore" (un termine che ho appena inventato). Quindi estrarre una forma ad anello da questo poligono come fa un tagliabiscotti con l'impasto. Ci sarebbe più di un modo per farlo. Disegnando semplicemente un cerchio pieno dal centro al raggio interno con lo sfondo, si eliminerà la parte centrale. La parte esterna sarebbe più difficile. Non so se puoi farlo in WPF, ma quello che dovresti fare è generare una maschera che è un cerchio dal centro al bordo esterno dell'anello. Sarebbe un cerchio bianco su uno sfondo nero. Quindi " AND " con l'immagine per sbarazzarsi dell'esterno del poligono.

Non perfetto ma sospetto che sembrerà ragionevole. Molti trigoni!