如何在 XAML 中创建以下形状?
替代文字 http://mtx.dk/ellipse.png
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
???
</Ellipse.Fill>
</Ellipse>
LinearGradientBrush不能这样变换吗?RadialGradientBrush 也不适合。
有任何想法吗?
如何在 XAML 中创建以下形状?
替代文字 http://mtx.dk/ellipse.png
<Ellipse Height="100" Width="100">
<Ellipse.Fill>
???
</Ellipse.Fill>
</Ellipse>
LinearGradientBrush不能这样变换吗?RadialGradientBrush 也不适合。
有任何想法吗?
你不能用椭圆和内置的画笔来做,但自己写这样的形状并不难。
您可以绘制许多“饼片”形状,并对每个切片应用不同的线性渐变画笔。
这将使您开始:
class GradiantEllipse : FrameworkElement
{
private const double N = 100;
protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
{
var radius = Math.Min(ActualWidth/2,ActualHeight/2);
var center = new Point(ActualWidth/2,ActualHeight/2);
for (int i = 0; i < N; ++i)
{
var startAngle = (Math.PI*2/N)*i;
var endAngle = (Math.PI*2/N)*(i+1)+2*(Math.PI/radius)+1/(2*Math.PI+radius); // + 1px to avoid gap
var start = new Point(Math.Cos(startAngle)*radius+center.X,
Math.Sin(startAngle)*radius+center.Y);
var end = new Point(Math.Cos(endAngle)*radius+center.X,
Math.Sin(endAngle)*radius+center.Y);
var figure = new PathFigure();
figure.StartPoint = center;
figure.Segments.Add(new LineSegment(start,false));
figure.Segments.Add(new LineSegment(end,false));
figure.IsClosed = true;
var geo = new PathGeometry();
geo.Figures.Add(figure);
var gradiant = new LinearGradientBrush(
Color.FromArgb(255, (byte)((255.0 / N) * i), (byte)((255.0 / N) * i), (byte)((255.0 / N) * i)),
Color.FromArgb(255, (byte)((255.0 / N) * (i + 1)), (byte)((255.0 / N) * (i + 1)), (byte)((255.0 / N) * (i + 1))),
Math.Atan2(end.Y - start.Y, end.X - start.X) * 180 / Math.PI);
drawingContext.DrawGeometry(gradiant, null, geo);
}
}
}
您最好的选择是DrawingBrush
使用一些自定义绘图指令创建一个,也许将椭圆分成四等份,并用不同的RadialGradientBrush
.