用鼠标事件绘制折线答案

【问题标题】：Drawing Polyline with mouse events用鼠标事件绘制折线
【发布时间】：2014-03-03 03:33:23
【问题描述】：

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

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

StrokeThickness at 4 :

StrokeThickness at 15：

红点代表鼠标移动触发的位置，灰线当然是所有红点的折线。

任何想法为什么我得到这个？

【问题讨论】：

我们可以运行任何简单的代码来复制它吗？
是的，我可以提供样本（我将在接下来的 5 分钟内编辑我的帖子）
我无法在空项目中创建问题...
如题，问题是在新项目中修复了，还是提取代码比较麻烦？
如果您遵循 Stack Overflow 帮助中心的 How to create a Minimal, Complete, Tested and Readable example 页面中的建议，那么您最终会得到一个简洁但完整的工作示例来重现您的问题，然后您可以在这里发布，否则您将在此过程中找到并解决您的问题。

标签： c# wpf

【解决方案1】：

如果是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>

【讨论】：

是的！非常感谢。它与StrokeMiterLimit="1"和StrokeLineJoin="Round"一起工作。