Reputation: 725
I'm trying to create a drawing application with WPF.
I use a Canvas and I draw Polyline on where the MouseMove event triggers. But some artifacts are created during the process :
StrokeThickness at 4 :
StrokeThickness at 15 :
The red points represent where the MouseMove triggered, and the gray line is, of course, the Polyline with all the red points.
Any ideas why I get this ?
Upvotes: 3
Views: 1146
Reputation: 12550
If StrokeLineJoin=Miter
then you can use StrokeMiterLimit
to control how far out the miter extends.
(StrokeLineJoin=Mitre
is the default on a PolyLine
)
Alternatively, you can use StrokeLineJoin=Round
to get a nice transition between segments.
Use StrokeStartLineCap
and StrokeEndLineCap
if you want different ends.
<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>
Upvotes: 6