线性渐变画笔，线外带有渐变停止点

Question

我正在尝试绘制一个波形，类似于我的 WPF 应用程序中 soundcloud.com 上使用的波形我通过绘制多条垂直线来做到这一点

我想要的是所有线条都有相同的颜色过渡（因此水平所有像素都具有相同的颜色）因为并非所有行都有相同的长度，所以每行在行尾都有不同的颜色。

LinearGradientBrush

有很多构造函数，最适合我需求的似乎是 LinearGradientBrush（GradientStopCollection， Point， Point）。

关于 LinearGradientContstructor 的 Msdn 文章

有了这些点，我似乎可以在绘制的线之外设置我的渐变停止

我遇到的问题是我不知道如何使用这些积分。

var r = new GradientStopCollection();
r.Add(new GradientStop(Colors.Black, 0));
r.Add(new GradientStop(Colors.Red, 0.5));
r.Add(new GradientStop(Colors.Black, 1));
//this would be my main gradient background for all my lines (100%)
for (int i = 0; i < 25; i++)
{
  var line = new Line { X1 = i, X2 = i, Y1 = 0, Y2 = 200, Stroke = new LinearGradientBrush(r), StrokeThickness = 1 };
  WaveformCanvas.Children.Add(line);
}
//this would be an actual value of the waveform, points 0,0 and 1,1 seem to indicate that the gradientstops are exactly on the y1/y2
for (int i = 25; i < 50; i++)
{
  var line = new Line { X1 = i, X2 = i, Y1 = 50, Y2 = 150, Stroke = new LinearGradientBrush(r, new Point(0, 0), new Point(1, 1)), StrokeThickness = 1 };
  WaveformCanvas.Children.Add(line);
}
//these point values seem to be about correct for the current line length
//I came to these values by trial and error
for (int i = 50; i < 75; i++)
{
  var line = new Line { X1 = i, X2 = i, Y1 = 50, Y2 = 150, Stroke = new LinearGradientBrush(r, new Point(-0.5, -0.5), new Point(1.5, 1.5)), StrokeThickness = 1 };
  WaveformCanvas.Children.Add(line);
}

我很困惑为什么这些点是 2d 坐标，因为点 -0.5，-0.5 的梯度似乎与绘制的线的角度不同

所以我需要了解如何相对于我的"主要 100% 梯度"放置点

或者，也许更简单的方法是用纯色绘制线条，然后使用某种颜色选择将黑色像素替换为矩形渐变作为背景。

Answer 1

看看 GradientBrush.MappingMode 属性。

LinearGradientBrush(GradientStopCollection, Point, Point)会用BrushMappingMode.RelativeToBoundingBox初始化画笔，但我认为你需要BrushMappingMode.Absolute.这没有构造函数重载。因此，您必须自己设置此属性。

LinearGradientBrush brush = new LinearGradientBrush(r, new Point(0, 0), new Point(0, 200));
brush.MappingMode = BrushMappingMode.Absolute;