Comment dessiner une roue de couleur dans l'application WPF?

Question

J'ai commencé à jouer avec WPF et je voulais dessiner la roue de couleurs sur un formulaire.

Au début, j'ai essayé d'utiliser LinearGradientBrush sur ArcSegment comme suit:

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

Sans succès, car le dégradé était toujours horizontal.

Une autre idée est ce que je dois plier ligne après l'application du dégradé. Mais je ne trouve pas de transformation appropriée.

S'il n'y a pas de transformation standard, est-il possible de créer une transformation personnalisée? Ou devrais-je dessiner une roue de couleur en pixels?

Toutes les idées, s'il vous plaît.

Answer 1

Cette bibliothèque comporte des pixel shaders qui dessinent des roues de couleur

.

Exemple de xaml:

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

Notez que l'ellipse doit avoir un pinceau défini sur Remplir pour que cela fonctionne, cela peut être n'importe quelle couleur.

Answer 2

Voici encore un autre exemple tiré de silverlight: http://asyrovprog.host22.com/colorwheel.html . Le code source se trouve ici: timeline.codeplex.com sous licence bsd.

Answer 3

Vous recherchez un chemin Pinceau dégradé . Malheureusement, ce n'est pas encore disponible dans WPF (mais c'est dans GDI +). Peut-être dans une future version ...

J'ai une idée sur la façon d'obtenir une roue chromatique approximative.

Une description détaillée de celui-ci consisterait à utiliser des gradients linéaires (rectangles) qui sont tournés et traduits pour former un polygone régulier dont l’épaisseur est beaucoup plus large que la largeur de bague souhaitée. Vous avez alors " découper " en forme de bague et utilisez-la comme roue chromatique.

Une roue chromatique comporte plusieurs couleurs principales (rouge, vert, bleu, jaune, etc.). Vous devez d’abord définir la mesure du degré à partir d’une ligne de base arbitraire. Par exemple, le rouge correspond à 0 radian, le bleu à pi radians, etc. Vous définissez également un rayon intérieur et extérieur pour l'anneau. Avec trig, vous contournez le rectangle de dessin en anneau avec un dégradé linéaire de la couleur à laquelle vous commencez jusqu'à la couleur adjacente suivante. La largeur du rectangle devra être plus grande que la largeur de l'anneau (vous verrez pourquoi plus tard) et le rectangle devra être pivoté pour être tangent au cercle en son milieu.

Une fois terminé, vous aurez un " polygone de couleur " (un terme que je viens de inventé). Vous extrayez ensuite une forme d’anneau de ce polygone, comme le ferait un emporte-pièce avec de la pâte. Il y aurait plus d'une façon de faire cela. Le simple fait de dessiner un cercle rempli du centre au rayon intérieur avec l’arrière-plan permet d’éliminer la partie centrale. La partie extérieure serait plus difficile. Je ne sais pas si vous pouvez faire cela dans WPF, mais ce que vous devez faire, c'est générer un masque qui est un cercle du centre au bord extérieur de l'anneau. Ce serait un cercle blanc sur un fond noir. Vous avez alors " ET " avec l'image pour se débarrasser de l'extérieur du polygone.

Ce n’est pas parfait, mais cela me paraît raisonnable. Beaucoup de trig!