用纯色或透明笔画绘制 WPF 多边形
Drawing WPF Polygon with a stroke in solid color or transparent around
我需要在 WPF 中创建一个通用三角形,指示坐标、笔划以及笔划和填充区域的颜色。问题是我还想将笔划的透明表示为颜色,这意味着比使用相同的坐标,我想在这个形状内绘制一个透明的笔划,用填充颜色代替他的厚度,但这似乎是不可能的(我发现并解决了圆形和矩形的相同问题,但对于多边形它不起作用: )。
我现在使用的代码包括一个剪辑,因为笔划在坐标轮廓内部和外部增长,我需要删除外部部分,并且需要一些转换器以正确的方式提供点数组:
<UserControl.Clip>
<PathGeometry>
<PathFigure StartPoint="{Binding Triangle.Points, Converter={StaticResource PointLocationClipConverter}}" IsClosed="True">
<PolyLineSegment Points="{Binding Triangle.Points, Converter={StaticResource PointCollectionClipConverter}}" />
</PathFigure>
</PathGeometry>
</UserControl.Clip>
<Grid x:Name="_grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Polygon Points="{Binding Triangle.Points, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource PointCollectionConverter}}" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0"
Width="{Binding ActualWidth, ElementName=_grid}"
Height="{Binding ActualHeight, ElementName=_grid}"
Stroke="{Binding Triangle.BorderColorBrush}"
StrokeThickness="{Binding Triangle.Thick, Converter={StaticResource PoligonThickConverter}}"
Fill="{Binding Triangle.BackgroundBrush}" />
</Grid>
此时我拥有的是:
我想要的是:
注意:对于发布的两个示例,第一张图片的描边和填充区域为纯色,第二张图片的描边透明,填充区域为纯色(这就是问题所在),第三张图片的纯色为填充区域的描边和透明。所有图像具有相同的坐标和 StrokeThickness 值。
感谢帮助!
从@Clemens 的指点出发,我详细阐述了一系列变换的解决方案,没有任何几何微积分。或多或少的解决方案在这里,我会尝试应用到我的上下文中,但最终是:
<Path MouseLeftButtonUp="PathPolyline_MouseLeftButtonUp"
StrokeThickness="0" Stroke="Transparent" Fill="Gold" ClipToBounds="False">
<Path.Data>
<PathGeometry FillRule="EvenOdd" >
<PathFigure StartPoint="0,0" IsClosed="True">
<PolyLineSegment Points="50,50 0,80"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
C# 代码中的详细说明将执行以下操作:
private void PathPolyline_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Brush brush = Brushes.Black;
Pen pen = new Pen(brush, 20.0); //thickness double than wanted measure: 20 to reduce 10
//
Path path = sender as Path;
PathGeometry pg = path.Data as PathGeometry;
PathGeometry pg2 = pg.GetWidenedPathGeometry(pen);
//
Transform tr = Transform.Identity;
PathGeometry pg324 = Geometry.Combine(pg, pg2, GeometryCombineMode.Intersect, tr);
pg.AddGeometry(pg324);
}
我需要在 WPF 中创建一个通用三角形,指示坐标、笔划以及笔划和填充区域的颜色。问题是我还想将笔划的透明表示为颜色,这意味着比使用相同的坐标,我想在这个形状内绘制一个透明的笔划,用填充颜色代替他的厚度,但这似乎是不可能的(我发现并解决了圆形和矩形的相同问题,但对于多边形它不起作用:
<UserControl.Clip>
<PathGeometry>
<PathFigure StartPoint="{Binding Triangle.Points, Converter={StaticResource PointLocationClipConverter}}" IsClosed="True">
<PolyLineSegment Points="{Binding Triangle.Points, Converter={StaticResource PointCollectionClipConverter}}" />
</PathFigure>
</PathGeometry>
</UserControl.Clip>
<Grid x:Name="_grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Polygon Points="{Binding Triangle.Points, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource PointCollectionConverter}}" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0"
Width="{Binding ActualWidth, ElementName=_grid}"
Height="{Binding ActualHeight, ElementName=_grid}"
Stroke="{Binding Triangle.BorderColorBrush}"
StrokeThickness="{Binding Triangle.Thick, Converter={StaticResource PoligonThickConverter}}"
Fill="{Binding Triangle.BackgroundBrush}" />
</Grid>
此时我拥有的是:
我想要的是:
注意:对于发布的两个示例,第一张图片的描边和填充区域为纯色,第二张图片的描边透明,填充区域为纯色(这就是问题所在),第三张图片的纯色为填充区域的描边和透明。所有图像具有相同的坐标和 StrokeThickness 值。
感谢帮助!
从@Clemens 的指点出发,我详细阐述了一系列变换的解决方案,没有任何几何微积分。或多或少的解决方案在这里,我会尝试应用到我的上下文中,但最终是:
<Path MouseLeftButtonUp="PathPolyline_MouseLeftButtonUp" StrokeThickness="0" Stroke="Transparent" Fill="Gold" ClipToBounds="False"> <Path.Data> <PathGeometry FillRule="EvenOdd" > <PathFigure StartPoint="0,0" IsClosed="True"> <PolyLineSegment Points="50,50 0,80"/> </PathFigure> </PathGeometry> </Path.Data> </Path>
C# 代码中的详细说明将执行以下操作:
private void PathPolyline_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Brush brush = Brushes.Black;
Pen pen = new Pen(brush, 20.0); //thickness double than wanted measure: 20 to reduce 10
//
Path path = sender as Path;
PathGeometry pg = path.Data as PathGeometry;
PathGeometry pg2 = pg.GetWidenedPathGeometry(pen);
//
Transform tr = Transform.Identity;
PathGeometry pg324 = Geometry.Combine(pg, pg2, GeometryCombineMode.Intersect, tr);
pg.AddGeometry(pg324);
}