如何在WPF应用程序中绘制色轮？
我开始使用 WPF 并想在表单上绘制色轮。
起初，我尝试在 ArcSegment 上使用 LinearGradientBrush，如下所示：
<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>
不成功，因为渐变仍然是水平的。
另一个想法是在应用渐变后我必须以某种方式弯曲线条。 但我找不到合适的变换。
如果没有标准转换，是否可以进行自定义转换？ 或者我应该按像素绘制色轮？
任何想法，请。
I started to play with WPF and wanted to draw color wheel on a form.
At first I tryed to use LinearGradientBrush on ArcSegment like this:
<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>
Unsuccessfully, because gradient was still horizontal.
Another idea is what I have to bend line somehow after applying the gradient. But I can't find apropriate transform.
If there is no standard transform is it possible to make custom transform? Or should I draw color wheel by pixels?
Any ideas, please.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是 silverlight 的另一个示例： http://asyrovprog.host22.com/colorwheel.html 。
源代码位于此处：timeline.codeplex.com，采用 bsd 许可证。
Here is yet another example from silverlight: http://asyrovprog.host22.com/colorwheel.html.
Source code is located here: timeline.codeplex.com under bsd license.
此库具有绘制色轮的像素着色器
示例 xaml：
请注意，椭圆必须在
Fill上设置画笔才能使其工作，可以是任何颜色。This library has pixel shaders that draw color wheels
Sample xaml:
Note that the ellipse must have a brush set on
Fillfor this to work, can be any colour.您正在寻找的是路径渐变画笔< /a>. 遗憾的是，它在 WPF 中尚不可用（但在 GDI+ 中可用）。 也许在未来的版本中......
我确实有一个关于如何获得近似色轮的想法。
对其的高级描述是使用线性渐变（矩形），将其旋转和平移以形成厚度比所需环宽度宽得多的正多边形。 然后，您从中“剪出”一个环形并将其用作色轮。
色轮有几种主要颜色（红、绿、蓝、黄等）。 您首先需要从任意基线定义度数测量。 例如，红色为 0 弧度，蓝色为 pi 弧度等。您还可以定义环的内半径和外半径。 使用三角函数，您可以使用从开始颜色到下一个相邻颜色的线性渐变沿着环形绘制矩形走动。 矩形的宽度必须大于环的宽度（稍后您将看到原因），并且需要旋转矩形以使其与圆的中点相切。
完成后，您将拥有一个“彩色多边形”（我刚刚编造的术语）。 然后，您可以从这个多边形中提取一个环形形状，就像饼干切割机处理面团一样。 有不止一种方法可以做到这一点。 只需从中心到内半径与背景绘制一个实心圆即可消除中间部分。 外部部分会更困难。 我不知道你是否可以在 WPF 中执行此操作，但你需要做的是生成一个蒙版，该蒙版是从环的中心到外边缘的圆。 它是黑色背景上的白色圆圈。 然后将其与图像“与”以消除多边形的外部。
并不完美，但我怀疑它看起来很合理。 很多三角！
What you're looking for is a Path Gradient Brush. Sadly, it's not yet available in WPF (but it is in GDI+). Perhaps in a future version...
I do have an idea on how to get an approximate color wheel.
A high level description of it would be using linear gradients (rectangles) that are rotated and translated to make a regular polygon whose thickness is much wider than the desired ring width. You then "cut out" a ring shape from this and use it as your color wheel.
A color wheel has several major colors (red, green, blue, yellow, etc). You will first need to define the degree measurement from some arbitrary base line. For example, red is at 0 radians, blue is at pi radians, etc. You also define an inner and outer radius for the ring. Using trig, you walk around the ring drawing rectangle with a linear gradient from the color you start on to the next adjacent color. The width of the rectangle will have to be larger than the width of the ring (you'll see why later) and the rectangle will need to be rotated to be tangent to the circle at its midpoint.
Once finished you will have a "color polygon" (a term I just made up). You then extract a ring shape from this polygon like a cookie cutter does with dough. There 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 on the middle part. The outer part would be more difficult. I don't know if you can do this in WPF but what you'd need to do is generate 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. You then "AND" it with the image to get rid of the outside of the polygon.
Not perfect but it will look reasonable I suspect. Lots of trig!