¿Cómo dibujar la rueda de colores en la aplicación WPF?

Question

Empecé a jugar con WPF y quería dibujar color wheel en un formulario.

Al principio He probado a utilizar LinearGradientBrush en ArcSegment así:

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

Sin éxito, porque todavía estaba pendiente horizontal.

Otra idea es lo que tengo que doblar la línea de alguna manera después de aplicar el degradado. Pero no puedo encontrar una transformación adecuada.

Si no hay una transformación estándar, ¿es posible realizar una transformación personalizada? ¿O debería dibujar la rueda de colores por píxeles?

Cualquier idea, por favor.

Answer 1

This library has pixel shaders that draw color wheels

xaml muestra:

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

Tenga en cuenta que la elipse debe tener un sistema de cepillo de Fill para que esto funcione, puede ser de cualquier color.

Answer 2

Lo que estás buscando es un Path Gradient Brush. Lamentablemente, todavía no está disponible en WPF (pero está en GDI +). Tal vez en una versión futura ...

Tengo una idea sobre cómo obtener una rueda de colores aproximada.

Una descripción de alto nivel de la misma estaría utilizando gradientes lineales (rectángulos) que se rotan y se traducen para hacer un polígono regular cuyo grosor es mucho más ancho que el ancho de anillo deseado. A continuación, "corta" una forma de anillo de esta y la utiliza como su rueda de colores.

Una rueda de colores tiene varios colores principales (rojo, verde, azul, amarillo, etc.). Primero deberá definir la medida del grado a partir de una línea base arbitraria. Por ejemplo, el rojo está en 0 radianes, el azul en pi radianes, etc. También define un radio interior y exterior para el anillo. Usando trig, camina alrededor del rectángulo de dibujo del anillo con un degradado lineal desde el color en el que comienza hasta el siguiente color adyacente. El ancho del rectángulo tendrá que ser más grande que el ancho del anillo (verás por qué más adelante) y el rectángulo deberá rotarse para que sea tangente al círculo en su punto medio.

Una vez terminado, tendrá un "polígono de color" (un término que acabo de inventar). A continuación, extrae una forma de anillo de este polígono como lo hace un cortador de galletas con la masa. Habría más de una forma de hacer esto. Simplemente dibujar un círculo relleno desde el centro hasta el radio interior con el fondo se eliminará en la parte media. La parte externa sería más difícil. No sé si puede hacer esto en WPF, pero lo que tendría que hacer es generar una máscara que sea un círculo desde el centro hasta el borde exterior del anillo. Sería un círculo blanco sobre un fondo negro. A continuación, "Y" con la imagen para deshacerse de la parte exterior del polígono.

No es perfecto, pero se verá razonable, sospecho. ¡Montones de trigonometría!

Answer 3

Aquí hay otro ejemplo de silverlight: http://asyrovprog.host22.com/colorwheel.html. El código fuente se encuentra aquí: timeline.codeplex.com bajo la licencia bsd.