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

Question

Empecé a jugar con WPF y quería dibujar rueda de colores en un formulario.

Al principio intenté usar LinearGradientBrush en ArcSegment de esta manera:

<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 el gradiente aún era horizontal.

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

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

Cualquier idea, por favor.

Answer 1

Esta biblioteca tiene sombreadores de píxeles que dibujan ruedas de color

Muestra de xaml:

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

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

Answer 2

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

Answer 3

Lo que está buscando es un Path Pincel de degradado . Lamentablemente, aún no está disponible en WPF (pero está en GDI +). Quizás en una versión futura ...

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

Una descripción de alto nivel sería usar 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 del anillo deseado. Entonces '' recorta '' una forma de anillo de esto y úsela 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 está en pi radianes, etc. También define un radio interno y externo para el anillo. Usando trigonometría, camina alrededor del rectángulo de dibujo del anillo con un degradado lineal desde el color que comienza hasta el siguiente color adyacente. El ancho del rectángulo tendrá que ser mayor que el ancho del anillo (verás por qué más adelante) y el rectángulo deberá girarse 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). Luego extrae una forma de anillo de este polígono como lo hace un cortador de galletas con masa. Habría más de una forma de hacer esto. Simplemente dibujando un círculo lleno desde el centro hasta el radio interior con el fondo se eliminará en la parte central. La parte exterior sería más difícil. No sé si puedes hacer esto en WPF, pero lo que deberías 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. Entonces '' Y '' con la imagen para eliminar el exterior del polígono.

No es perfecto, pero parecerá razonable, sospecho. ¡Muchos trigonometros!