c# - 用鼠标事件绘制折线

我正在尝试使用WPF创建绘图应用程序。

我使用Canvas，并在MouseMove事件触发的位置绘制折线。
但是在此过程中会创建一些工件：

4时的笔触厚度：



15岁时的笔触厚度：



红色点表示MouseMove触发的位置，灰色线当然是包含所有红色点的折线。

有什么想法我明白这个吗？

最佳答案

如果为StrokeLineJoin=Miter，则可以使用StrokeMiterLimit控制斜接的延伸范围。

（StrokeLineJoin=Mitre是PolyLine的默认设置）

另外，您可以使用StrokeLineJoin=Round在段之间进行很好的过渡。

如果需要不同的末端，请使用StrokeStartLineCap和StrokeEndLineCap。

<Window x:Class="WpfApplication5.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="500">
    <Window.Resources>
        <PointCollection x:Key="points">0,0 10,30 15,0 18,60 23,30 35,30 40,0 43,60 48,30 100,30</PointCollection>
    </Window.Resources>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
    <StackPanel Orientation="Horizontal">
        <Polyline Stroke="Gray" StrokeThickness="4" Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="4" StrokeMiterLimit="10" Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="4" StrokeMiterLimit="5"  Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="4" StrokeMiterLimit="1"  Points="{StaticResource points}" />
    </StackPanel>
    <StackPanel Orientation="Horizontal" Margin="0,50,0,0">
        <Polyline Stroke="Gray" StrokeThickness="10" Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="10" StrokeMiterLimit="10" Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="10" StrokeMiterLimit="5"  Points="{StaticResource points}" />
        <Polyline Stroke="Gray" StrokeThickness="10" StrokeMiterLimit="1"  Points="{StaticResource points}" />
    </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="0,50,0,0">
            <Polyline Stroke="Gray" StrokeThickness="10" StrokeLineJoin="Miter" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Points="{StaticResource points}" />
            <Polyline Stroke="Gray" StrokeThickness="10" StrokeLineJoin="Bevel" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Points="{StaticResource points}" />
            <Polyline Stroke="Gray" StrokeThickness="10" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round" Points="{StaticResource points}" />
        </StackPanel>
    </StackPanel>
</Window>