How to draw a color wheel in a WPF application?

I started playing with WPF and wanted to draw a color wheel in the shape.

First, I tried using LinearGradientBrush in ArcSegment as follows:

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

Unsuccessful, because the gradient is still horizontal.

Another idea is that I need to bend, somehow after applying the gradient. But I can not find a suitable transformation.

If there is no standard conversion, is it possible to make a custom conversion? Or should I draw a color wheel in pixels?

Any ideas please.

+6
wpf gradient transform
source share
3 answers

This library has pixel shaders that draw color wheels.

Xaml example:

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

Please note that for this ellipse to work, a brush must be installed on Fill , it can be any color.

+1
source share

Here is another example from silverlight: http://asyrovprog.host22.com/colorwheel.html . The source code is here: timeline.codeplex.com licensed under bsd.

+3
source share

What you are looking for is Path Gradient Brush . Unfortunately, it is not yet available in WPF (but it is in GDI +). Perhaps in a future version ...

I have an idea on how to get an approximate color wheel.

Its high-level description will be the use of linear gradients (rectangles), which are rotated and translated to create a regular polygon, the thickness of which is much wider than the desired width of the ring. Then you “cut out” the shape of the ring from this and use it as your color wheel.

The color wheel has several primary colors (red, green, blue, yellow, etc.). First you need to determine the degree measure from some arbitrary baseline. For example, red is at 0 radians, blue is at pi radians, etc. You also define the inner and outer radius of the ring. Using a trigger, you go around a rectangle drawing rectangle with a linear gradient from the color you start to the next adjacent color. The width of the rectangle should be greater than the width of the ring (you will see why later), and the rectangle must be rotated so that it touches the circle in its middle.

Upon completion, you will have a “colored polygon” (the term that I just composed). Then you extract the ring shape from this polygon, like a cookie cutter, with dough. It would be more than one way to do this. Simply drawing a filled circle from the center to the inner radius with the background will get rid of the middle part. The outside will be harder. I don’t know if you can do this in WPF, but you will need to create a mask that is a circle from the center to the outer edge of the ring. It would be a white circle on a black background. Then you are an “AND” with an image to get rid of the outside of the polygon.

Not perfect, but it will look reasonable, I suspect. Lots of triggers!

+2
source share

All Articles