具有双值的帆布线条笔画粗细创建云纹效果

Question

我正在尝试绘制波形。 我有一个预先计算好的要绘制的数据点数量（例如 1000 个）。 我想用波形填充画布控件的整个宽度。 因此，我必须重新计算我绘制的每个数据点的宽度。

为此，我尝试将 StrokeThickness 设置为总宽度除以数据点的 nr。 （例如 0.35629）并每 0.35629 像素打印一条 0.35629 像素宽的线。

这会产生不需要的波纹效果。

对我来说，StrokeThickness 是双倍的感觉很奇怪，因为 WPF 将如何绘制一条 0.35629 像素宽的线？

下面是一个代码示例来说明我的意思。前半部分还可以，后半部分有云纹效果。

这是要走的路还是我需要另一种方法？

for (int i = 0; i < 500; i++)
{
    Line line = new Line();
    line.X1 = i;
    line.X2 = i;
    line.Y1 = 0;
    line.Y2 = 100;
    line.Stroke = new SolidColorBrush(Colors.Black);
    line.StrokeThickness = 1;
    this.demoCanvas.Children.Add(line);
}

const double canvasWidth = 525;
const double nrOfDatapoints = 500d;
const double pixelsPerPoint = canvasWidth/nrOfDatapoints  ;
double x = 500;
for (int i = 0; i < nrOfDatapoints; i++)
{
    Line line = new Line();
    line.X1 = x;
    line.X2 = x;
    line.Y1 = 0;
    line.Y2 = 100;
    line.Stroke = new SolidColorBrush(Colors.Black);
    line.StrokeThickness = pixelsPerPoint;
    this.demoCanvas.Children.Add(line);
    x += pixelsPerPoint;
}

Answer 1

为避免波纹，您应该设置 SnapToDevicePixels="True"。 Check it out here