Comment dessiner une roue de couleurs dans une application WPF?

Question

J'ai commencé à jouer avec WPF et je voulais dessiner color wheel sur un formulaire.

Au début, je tryed à utiliser LinearGradientBrush sur ArcSegment comme ceci:

<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 gradient était encore horizontal.

Une autre idée est ce que je dois plier ligne en quelque sorte après l'application du gradient. Mais je ne peux pas trouver une transformation appropriée.

S'il n'y a pas de transformation standard, est-il possible de faire une transformation personnalisée? Ou devrais-je dessiner la roue de couleur par Pixel?

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

Answer 1

This library has pixel shaders that draw color wheels

Exemple XAML:

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

Notez que l'ellipse doit avoir une brosse définie sur Fill pour que cela fonctionne, peut être une couleur.

Answer 2

Ce que vous cherchez est un Path Gradient Brush. 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 de couleur approximative. Une description de haut niveau de ce serait d'utiliser des gradients linéaires (rectangles) qui sont tournés et traduits pour faire un polygone régulier dont l'épaisseur est beaucoup plus large que la largeur de l'anneau désiré. Vous "coupez" une forme d'anneau de ceci et l'employez comme votre roue de couleur.

Une roue chromatique possède plusieurs couleurs principales (rouge, vert, bleu, jaune, etc.). Vous devrez d'abord définir la mesure du degré à partir d'une ligne de base arbitraire. Par exemple, le rouge est à 0 radians, le bleu à pi radians, etc. Vous définissez également un rayon interne et externe pour l'anneau. En utilisant trig, vous contournez le rectangle de dessin en anneau avec un dégradé linéaire de la couleur que vous commencez à 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 tourné pour être tangent au cercle à son milieu.

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

Pas parfait, mais je pense qu'il sera raisonnable. Beaucoup de trig!

Answer 3

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