在软件行业,经常会听到一句话“文不如表,表不如图”说明了图形在软件应用中的重要性。同样在WPF开发中,为了程序美观或者业务需要,经常会用到各种个样的图形。今天以一些简单的小例子,简述WPF开发中几何图形(Geometry)相关内容,仅供学习分享使用,如有不足之处,还请指正。
什么是几何图形(Geometry)
几何图形与形状的区别
-
Geometry继承自Freezable类,而Shape继承自FrameworkElement。所以Shape及其派生类可以在UI页面中独立存在并参与页面布局,而Geometry及其派生类则不能。 -
由于Shape类是UI无素,所以Shape类比Geometry更易于使用,但是Geometry却更通用,Shape用于呈现2D图形,但是Geometry可用于定义2D图形的几何区域,定义裁剪的区域或命中测试区域等。 -
Shape派生类Path的Data属性,就是Geometry类型。所以可以理解为Shape是外在呈现形状,而Geometry是其内容,而Fill和Stroke属性,则对应画笔。
简单的几何图形
-
LineGeometry,通过指定直线的起点和终点来定义线条。 -
RectangleGeometry使有Rect结构来定义,指定矩形的相对位置,及高度和宽度。也可以使用RadiusX,RadiusY属性来创建圆角矩形。 -
EllipseGeometry由中心点,x轴半径,y轴半径来创建椭圆,如果x轴半径和y轴半径相等,则为圆形。
LineGeometry
<Path Stroke="Black" StrokeThickness="1" >
<Path.Data>
<LineGeometry StartPoint="10,20" EndPoint="100,130" />
</Path.Data>
</Path>
LineGeometry lineGeometry = new LineGeometry();
lineGeometry.StartPoint = new Point(10, 20);
lineGeometry.EndPoint = new Point(100, 130);
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 1;
path.Data = lineGeometry;
EllipseGeometry
<Path Fill="Gold" Stroke="Black" StrokeThickness="1">
<Path.Data>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Path.Data>
</Path>
EllipseGeometry ellipseGeometry = new EllipseGeometry();
ellipseGeometry.Center = new Point(50, 50);
ellipseGeometry.RadiusX = 50;
ellipseGeometry.RadiusY = 50;
Path path = new Path();
path.Fill = Brushes.Gold;
path.Stroke = Brushes.Black;
path.StrokeThickness = 1;
path.Data = ellipseGeometry;
RectangleGeometry
<Path Fill="LemonChiffon" Stroke="Black" StrokeThickness="1">
<Path.Data>
<RectangleGeometry Rect="50,50,100,60" />
</Path.Data>
</Path>
RectangleGeometry rectangleGeometry = new RectangleGeometry();
rectangleGeometry.Rect = new Rect(50, 50, 100, 60);
Path path = new Path();
path.Fill = Brushes.LemonChiffon;
path.Stroke = Brushes.Black;
path.StrokeThickness = 1;
path.Data = rectangleGeometry;
图像裁剪
<StackPanel Orientation="Vertical" Margin="10">
<TextBlock Text="原图"></TextBlock>
<Image Source="imgsbingdundun.jpeg" Width="300" Height="200" HorizontalAlignment="Left">
</Image>
<TextBlock Text="裁剪后"></TextBlock>
<Image Source="imgsbingdundun.jpeg" Width="300" Height="200" HorizontalAlignment="Left">
<Image.Clip>
<EllipseGeometry RadiusX="130" RadiusY="80" Center="150,100"/>
</Image.Clip>
</Image>
</StackPanel>
Image image = new Image();
Uri imageUri = new Uri(@"imgsbingdundun.jpeg", UriKind.RelativeOrAbsolute);
image.Source = new BitmapImage(imageUri);
image.Width = 300;
image.Height = 200;
image.HorizontalAlignment = HorizontalAlignment.Left;
// 用椭圆定义裁剪区域.
EllipseGeometry ellipseGeometry = new EllipseGeometry();
ellipseGeometry.Center = new Point(150, 10);
ellipseGeometry.RadiusX = 130;
ellipseGeometry.RadiusY = 80;
image.Clip = ellipseGeometry;
路径几何
-
ArcSegment,表示两点之间创建一条椭圆弧。 -
BezierSegment,表示两个点之间的三次方贝塞尔曲线。 -
LineSegment,表示两个点之间的直线。 -
PolyBezierSegment,表示创建一系列的三次方贝塞尔曲线。 -
PolyLineSegment,表示创建一系列直线。 -
PolyQuadraticBezierSegment ,表示创建一系列二次贝塞尔曲线。 -
QuadraticBezierSegment,表示创建一条贝塞尔曲线。
-
PathFigure内的多个线段组合成单个几何形状,每个线段的终点,就是下一个线段的起点。 -
PathFigure的StartPoint属性指定绘制第一个线段的起点。 -
每一个线段都从上一个线段的终点开始。
<Path Stroke="Black" StrokeThickness="1" >
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigure StartPoint="10,50">
<PathFigure.Segments>
<BezierSegment Point1="100,0" Point2="200,200" Point3="300,100"/>
<LineSegment Point="400,100" />
<ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="True" SweepDirection="Clockwise" Point="200,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
上述XAML代码用C#实现,如下所示:
PathFigure pathFigure = new PathFigure();
pathFigure.StartPoint = new Point(10, 50);
pathFigure.Segments.Add(
new BezierSegment(
new Point(100, 0),
new Point(200, 200),
new Point(300, 100),
true /* IsStroked */ ));
pathFigure.Segments.Add(
new LineSegment(
new Point(400, 100),
true /* IsStroked */ ));
pathFigure.Segments.Add(
new ArcSegment(
new Point(200, 100),
new Size(50, 50),
45,
true, /* IsLargeArc */
SweepDirection.Clockwise,
true /* IsStroked */ ));
/// Create a PathGeometry to contain the figure.
PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures.Add(pathFigure);
// Display the PathGeometry.
Path path = new Path();
path.Stroke = Brushes.Black;
path.StrokeThickness = 1;
path.Data = pathGeometry;
上述代码创建的形状如下所示:
复合几何
-
CombinedGeometry 对象和 Combine 方法执行布尔运算,以合并由两个几何图形定义的面积。没有面积的 Geometry 对象将被放弃。只能合并两个 Geometry 对象(尽管这两个几何图形也可能是复合几何)。 -
GeometryGroup 类创建其包含的 Geometry 对象的合并,而不合并其面积。可以将任意数量的 Geometry 对象添加到 GeometryGroup。由于它们不执行合并操作,因此使用 GeometryGroup 对象的性能比使用 CombinedGeometry 对象或 Combine 方法的性能高。
<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
<Path.Data>
<CombinedGeometry GeometryCombineMode="Union">
<CombinedGeometry.Geometry1>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
</CombinedGeometry.Geometry1>
<CombinedGeometry.Geometry2>
<EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
</CombinedGeometry.Geometry2>
</CombinedGeometry>
</Path.Data>
</Path>
CombinedGeometry并集示例如下所示:
参考文档:
https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/graphics-multimedia/geometry-overview?view=netframeworkdesktop-4.8
学习编程,从关注【老码识途】开始,为大家分享更多文章!!!
原文始发于微信公众号(独立观察员博客):不可不知的WPF几何图形(Geometry)
免责声明:文章中涉及的程序(方法)可能带有攻击性,仅供安全研究与教学之用,读者将其信息做其他用途,由读者承担全部法律及连带责任,本站不承担任何法律及连带责任;如有问题可邮件联系(建议使用企业邮箱或有效邮箱,避免邮件被拦截,联系方式见首页),望知悉。
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论