Как нарисовать цветовой круг в приложении WPF? - PullRequest
Новая
       14

Как нарисовать цветовой круг в приложении WPF?

6 голосов
/ 05 мая 2009

Я начал играть с WPF и хотел нарисовать цветное колесо на форме.

Сначала я попытался использовать LinearGradientBrush в ArcSegment так: 

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

Неудачно, потому что градиент все еще был горизонтальным.

Другая идея заключается в том, что я должен как-то согнуть линию после применения градиента. Но я не могу найти подходящее преобразование.

Если стандартного преобразования не существует, возможно ли сделать пользовательское преобразование? Или я должен нарисовать цветовой круг пикселями?

Любые идеи, пожалуйста.

Ответы [ 3 ]

3 голосов
/ 26 ноября 2011

Вот еще один пример из silverlight: http://asyrovprog.host22.com/colorwheel.html. Исходный код находится здесь: timeline.codeplex.com под лицензией BSD.

2 голосов
/ 23 апреля 2017

В этой библиотеке есть пиксельные шейдеры, которые рисуют цветные круги

Образец xaml: 

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

Обратите внимание, что для работы эллипса должна быть установлена ​​кисть Fill, может быть любого цвета.

2 голосов
/ 20 июня 2009

То, что вы ищете, это Градиентная кисть . К сожалению, это еще не доступно в WPF (но это в GDI +). Возможно, в будущей версии ...

У меня есть идея, как получить приблизительное цветовое колесо.

Высокоуровневое описание этого будет использовать линейные градиенты (прямоугольники), которые вращаются и переводятся, чтобы сделать правильный многоугольник, толщина которого намного шире, чем желаемая ширина кольца. Затем вы «вырезаете» из него форму кольца и используете его в качестве цветового круга.

Цветовое колесо имеет несколько основных цветов (красный, зеленый, синий, желтый и т. Д.). Сначала вам нужно определить степень измерения по произвольной базовой линии. Например, красный - в 0 радианах, синий - в пи радианах и т. Д. Вы также определяете внутренний и внешний радиус кольца. Используя trig, вы обходите прямоугольник рисования кольца с линейным градиентом от цвета, с которого вы начинаете, до следующего смежного цвета. Ширина прямоугольника должна быть больше ширины кольца (вы поймете, почему позже), и необходимо повернуть прямоугольник, чтобы он касался окружности в его средней точке.

Как только вы закончите, у вас будет «цветной многоугольник» (термин, который я только что придумал). Вы тогда извлекаете форму кольца из этого многоугольника, как резак печенья делает с тестом. Там будет более чем один способ сделать это. Простое рисование заполненного круга от центра к внутреннему радиусу с фоном избавит от средней части. Внешняя часть будет сложнее. Я не знаю, сможете ли вы сделать это в WPF, но вам нужно создать маску, представляющую собой круг от центра к внешнему краю кольца. Это был бы белый кружок на черном фоне. Затем вы «И» с изображением, чтобы избавиться от внешней части многоугольника.

Не идеально, но это будет выглядеть разумно, я подозреваю. Много триг!

...