Как нарисовать цветовой круг в приложении WPF?
-
05-07-2019 - |
Вопрос
Я начал играть с 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>
Неудачно, потому что градиент все еще был горизонтальным.
Другая идея заключается в том, что я должен как-то согнуть линию после применения градиента. Но я не могу найти подходящее преобразование.
Если стандартного преобразования не существует, возможно ли сделать пользовательское преобразование? Или я должен нарисовать цветовой круг пикселями?
Любые идеи, пожалуйста.
Решение
В этой библиотеке есть пиксельные шейдеры, которые рисуют цветные круги
Пример xaml:
<Ellipse Width="300"
Height="300"
Fill="White">
<Ellipse.Effect>
<effects:HsvWheelEffect />
</Ellipse.Effect>
</Ellipse>
Обратите внимание, что для работы эллипса на Fill
должна быть кисть любого цвета.
Другие советы
Вот еще один пример из Silverlight: http://asyrovprog.host22.com/colorwheel.html а>. Исходный код находится здесь: timeline.codeplex.com под лицензией BSD.
Вам нужен путь Градиентная кисть . К сожалению, это еще не доступно в WPF (но это в GDI +). Возможно, в будущей версии ...
У меня есть идея, как получить приблизительное цветовое колесо.
Высокоуровневое описание этого будет использовать линейные градиенты (прямоугольники), которые вращаются и переводятся, чтобы сделать правильный многоугольник, толщина которого намного шире, чем желаемая ширина кольца. Вы тогда "выключаете" форму кольца из этого и использовать его в качестве цветового круга.
Цветовое колесо имеет несколько основных цветов (красный, зеленый, синий, желтый и т. д.). Сначала вам нужно определить степень измерения по произвольной базовой линии. Например, красный - в 0 радианах, синий - в пи радианах и т. Д. Вы также определяете внутренний и внешний радиус кольца. Используя trig, вы обходите прямоугольник рисования кольца с линейным градиентом от цвета, с которого вы начинаете, до следующего смежного цвета. Ширина прямоугольника должна быть больше ширины кольца (вы поймете, почему позже), и необходимо повернуть прямоугольник, чтобы он касался окружности в его средней точке.
Когда вы закончите, у вас будет "цветной полигон" (термин, который я только что придумал). Вы тогда извлекаете форму кольца из этого многоугольника, как резак печенья делает с тестом. Там будет более чем один способ сделать это. Простое рисование заполненного круга от центра к внутреннему радиусу с фоном избавит от средней части. Внешняя часть будет сложнее. Я не знаю, сможете ли вы сделать это в WPF, но вам нужно создать маску, представляющую собой круг от центра к внешнему краю кольца. Это был бы белый кружок на черном фоне. Вы тогда "И" это с изображением, чтобы избавиться от внешней стороны многоугольника.
Не идеально, но это будет выглядеть разумно, я подозреваю. Много триггеров!