WPF体验(4)

最新推荐文章于 2022-11-28 00:34:16 发布
最新推荐文章于 2022-11-28 00:34:16 发布
阅读量1.1w 收藏 3
点赞数
分类专栏： C# NET 文章标签： wpf 图形 360 windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/niwalker/article/details/549957
版权
NET 同时被 2 个专栏收录
19 篇文章 0 订阅
订阅专栏
C#
18 篇文章 0 订阅
订阅专栏
 

图形

 

图形无疑是当代应用程序界面最重要的功能，君不见那些控件不管是很cool的还是不cool的都要使用几何图形来显示。大家知道，图形分成两大类：位图和矢量图。有意思的是在界面设计上网页以位图居多，Windows桌面应用则是矢量图居多。究其原因，并不难理解，因为网页大部分的控件尺寸都是固定的，是用位图不会对界面带来太大的影响，而桌面应用中的窗体大小大多数都是可变的，所以矢量图更适合。在XAML中你不用会很大的劲就可以设计出各种图形，无论是二维还是三维图形。

我们先介绍2D图形，使用最后一次的XAML，把最后一个空的StackPanel改为<Canvas>。下面的代码显示了一组线段，是用不同的颜色和宽度：

<Canvas>

<Line X1="10" Y1="10" X2="100" Y2="10" Stroke="#FF0000"></Line>

<Line X1="10" Y1="20" X2="100" Y2="20" Stroke="#00FF00" StrokeThickness="2"></Line>

<Line X1="10" Y1="30" X2="100" Y2="30" Stroke="#0000FF" StrokeThickness="3"></Line>

<Line X1="10" Y1="40" X2="100" Y2="40" Stroke="#FFFF00" StrokeThickness="4"></Line>

<Line X1="10" Y1="50" X2="100" Y2="50" Stroke="#00FFFF" StrokeThickness="5"></Line>

<Line X1="10" Y1="60" X2="100" Y2="60" Stroke="#FF00FF" StrokeThickness="6"></Line>

</Canvas>

 

Line元素的X1,Y1, X2,Y2属性分别表示线段的两个端点坐标，Stroke属性指定线段的颜色，StrockThickness属性指定线段的宽度。

另外线段的颜色也可以进行渐变填充，如下面的代码：

 

<Canvas>
     ...

<Line X1="10" Y1="100" X2="100" Y2="100" StrokeThickness="10">

<Line.Stroke>

<LinearGradientBrush EndPoint="1,0">

<LinearGradientBrush.GradientStops>

<GradientStop Color="Red" Offset="0.0" />

<GradientStop Color="Yellow" Offset="1.0" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Line.Stroke>

</Line>

</Canvas>

 

其他的几何图形：

<!-- 矩形 -->

<Rectangle Width="150" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="120" Canvas.Top="10" />

<Rectangle Width="150" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="300" Canvas.Top="10"

Fill="LightGreen" />

 

<Rectangle Width="150" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="120" Canvas.Top="100"

RadiusX="5" RadiusY="5" />

<Rectangle Width="150" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="300" Canvas.Top="100"

Fill="Orange" RadiusX="5" RadiusY="5"/>

<!-- 椭圆 -->

<Ellipse Width="150" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="120" Canvas.Top="200" />

<!-- 圆 -->

<Ellipse Width="80" Height="80" Stroke="#000000" StrokeThickness="1" Canvas.Left="300" Canvas.Top="200" />

<!--多边形 -->

<Polygon Stroke="#FF000000" Points="500,10 460,30 475,60 525,60 540,30" StrokeThickness="1">

<Polygon.Fill>

<LinearGradientBrush EndPoint="0.707106781186548,0.707106781186547">

<LinearGradientBrush.GradientStops>

<GradientStop Offset="0" Color="#FF00FFFF" />

<GradientStop Offset="1" Color="#FF0000FF" />

</LinearGradientBrush.GradientStops>

</LinearGradientBrush>

</Polygon.Fill>

</Polygon>

 

我们这里介绍的仅仅是一个部分。下面介绍三维图形：

三维图形除了X,Y坐标，还有一个表示深度的Z坐标，要了解3D作图，首先必须熟悉3D场景：

在WPF中，三维坐标的原点在屏幕的中心，X向左为正，Y向上为正，Z向前为正。一个3D场景，你至少需要指定一个相机对象，并设置它的位置和其他属性。有两种相机对象，一种是正交的，另外一种是透视的。

下面的代码就定义了一个透视相机对象：

<Viewport3D.Camera>

<PerspectiveCamera FarPlaneDistance="50" LookDirection="0,0,-1" UpDirection="0,1,0" NearPlaneDistance="1" Position="2,2,15" FieldOfView="45" />

</Viewport3D.Camera>

 

其中FarPalneDistance和NearPalneDistance属性限定视觉范围，Position属性定义相机的位置，LookDirection属性定义相机的朝向，UpDirection定义相机正上方的方向, FieldOfView顾名思义就是相机的视角了。

 

定义了相机之后，你可以定义灯光，目前WPF支持4种灯光，它们分别是：AmbientLight、DirectionalLight、SpotLight和PointLight。3D场景中灯光的应用相当重要，如何巧妙的应用灯光效果已经超出了我们的介绍范围，你可以找有关3D设计的资料来看。

下面的代码定义了一盏白色的射灯：

<DirectionalLight Color="White" Direction="-3,-4,-5" />

有了相机和灯光，你就可以构造3D模型了，目前WPF只支持面片模型，也就是说用许多3角形的面构成一个模型表面，三角平面则是通过设置3个顶点坐标进行定义。构造一个3D物体模型相当复杂，以下代码仅仅是一个矩形平面的模型：

 

<GeometryModel3D>
      <!-- 定义物体的几何特征 -->

<GeometryModel3D.Geometry>

<MeshGeometry3D

Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"

Normals="0 0 1  0 0 1  0 0 1  0 0 1"

TextureCoordinates="0 1  1 1  0 0  1 0"

TriangleIndices="0,1,2,1,3,2" />

</GeometryModel3D.Geometry>

     <!-- 定义物体的材质 -->

         <GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<SolidColorBrush Color="Cyan" Opacity="0.3"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

    <!-- 定义物体的几何变换 -->

<GeometryModel3D.Transform>

<TranslateTransform3D

OffsetX="-3" OffsetY="0" OffsetZ="-10" >

</TranslateTransform3D>

</GeometryModel3D.Transform>

</GeometryModel3D>

 

最后我们综合到我们上一次的代码，在剩下的界面空间，放置上面的一个平面物体以及一个圆锥物体：

 

<Viewport3D Name="myViewport" ClipToBounds="True">

<!-- Add a camera. -->

<Viewport3D.Camera>

<PerspectiveCamera FarPlaneDistance="50" LookDirection="0,0,-1" UpDirection="0,1,0" NearPlaneDistance="1" Position="2,1,15" FieldOfView="45" />

</Viewport3D.Camera>

<ModelVisual3D>

<ModelVisual3D.Content>

<Model3DGroup>

<DirectionalLight Color="White" Direction="-3,-2,-5" />

<!-- Define a plane. -->

<GeometryModel3D>

<GeometryModel3D.Geometry>

<MeshGeometry3D

Positions="-1 -1 0  1 -1 0  -1 1 0  1 1 0"

Normals="0 0 1  0 0 1  0 0 1  0 0 1"

TextureCoordinates="0 1  1 1  0 0  1 0   "

TriangleIndices="0,1,2,1,3,2" />

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<SolidColorBrush Color="Cyan" Opacity="0.3"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

<GeometryModel3D.Transform>

<TranslateTransform3D

OffsetX="-3" OffsetY="0" OffsetZ="-10" >

</TranslateTransform3D>

</GeometryModel3D.Transform>

</GeometryModel3D>

 

<!-- Define a cone. -->

<GeometryModel3D>

<GeometryModel3D.Geometry>

<MeshGeometry3D

Positions="0.293893 -0.5 0.404509  0.475528 -0.5 0.154509  0 0.5 0  0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 0.154509  0.475528 -0.5 -0.154509  0 0.5 0  0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  0.475528 -0.5 -0.154509  0.293893 -0.5 -0.404509  0 0.5 0  0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  0.293893 -0.5 -0.404509  0 -0.5 -0.5  0 0.5 0  0 -0.5 -0.5  0 0.5 0  0 0.5 0  0 -0.5 -0.5  -0.293893 -0.5 -0.404509  0 0.5 0  -0.293893 -0.5 -0.404509  0 0.5 0  0 0.5 0  -0.293893 -0.5 -0.404509  -0.475528 -0.5 -0.154509  0 0.5 0  -0.475528 -0.5 -0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 -0.154509  -0.475528 -0.5 0.154509  0 0.5 0  -0.475528 -0.5 0.154509  0 0.5 0  0 0.5 0  -0.475528 -0.5 0.154509  -0.293892 -0.5 0.404509  0 0.5 0  -0.293892 -0.5 0.404509  0 0.5 0  0 0.5 0  -0.293892 -0.5 0.404509  0 -0.5 0.5  0 0.5 0  0 -0.5 0.5  0 0.5 0  0 0.5 0  0 -0.5 0.5  0.293893 -0.5 0.404509  0 0.5 0  0.293893 -0.5 0.404509  0 0.5 0  0 0.5 0  "

Normals="0.7236065,0.4472139,0.5257313  0.2763934,0.4472138,0.8506507  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  0.5308242,0.4294462,0.7306172  0.2763934,0.4472138,0.8506507  -0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.5308242,0.4294462,0.7306172  0,0.4294458,0.9030925  -0.2763934,0.4472138,0.8506507  -0.7236065,0.4472139,0.5257313  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.858892,0.429446,0.279071  -0.5308242,0.4294462,0.7306172  -0.7236065,0.4472139,0.5257313  -0.8944269,0.4472139,0  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.858892,0.429446,-0.279071  -0.858892,0.429446,0.279071  -0.8944269,0.4472139,0  -0.7236065,0.4472139,-0.5257313  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.5308242,0.4294462,-0.7306172  -0.858892,0.429446,-0.279071  -0.7236065,0.4472139,-0.5257313  -0.2763934,0.4472138,-0.8506507  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  -0.5308242,0.4294462,-0.7306172  -0.2763934,0.4472138,-0.8506507  0.2763934,0.4472138,-0.8506507  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.5308249,0.4294459,-0.7306169  0,0.4294458,-0.9030925  0.2763934,0.4472138,-0.8506507  0.7236068,0.4472141,-0.5257306  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8588922,0.4294461,-0.27907  0.5308249,0.4294459,-0.7306169  0.7236068,0.4472141,-0.5257306  0.8944269,0.4472139,0  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.858892,0.429446,0.279071  0.8588922,0.4294461,-0.27907  0.8944269,0.4472139,0  0.7236065,0.4472139,0.5257313  0.858892,0.429446,0.279071  0.7236065,0.4472139,0.5257313  0.5308242,0.4294462,0.7306172  0.858892,0.429446,0.279071"

TriangleIndices="0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 "/>

 

</GeometryModel3D.Geometry>

<GeometryModel3D.Material>

<DiffuseMaterial>

<DiffuseMaterial.Brush>

<SolidColorBrush Color="Red" Opacity="1.0"/>

</DiffuseMaterial.Brush>

</DiffuseMaterial>

</GeometryModel3D.Material>

</GeometryModel3D>

</Model3DGroup>

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D>

 

一个3D物体最复杂的就是那些顶点数据，手工完成他们是难以想象的，这通常通过3D建模软件来生成。WPF的未来版本会有相应的3D设计器，那时候就方便了。

 

图形设计我们就简单的到此为止，下一次我们介绍动画。

WPF体验(一）
WPF体验(二）
WPF体验(三）
WPF体验(五)

 

niwalker
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【愚公系列】2023年10月 WPF控件专题 Line控件详解
时光隧道
07-26 1万+
WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。
wpf使用line实现 直线，矩形，椭圆
u012932582的博客
10-11 1478
wpf使用line实现 直线，矩形，椭圆
WPF图形学习笔记之Line
yasenRK的博客
02-16 7237
WPF图形学习笔记之Line WPF_Graphics之Line Line 创建一个Line <Canvas> <Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Black" StrokeThickness="1"/> &l...
11.WPF绘图
博客
11-12 3139
11.WPF绘图
炫彩WPF计算器
03-08
基于VS2017的WPF的炫彩按钮计算器，LED显示算法内容，初学者可以体验WPF炫彩的效果
WPF经典知识总结
03-15
Windows Presentation Foundation (WPF) 是下一代显示系统，用于生成能带给用户震撼视觉体验的 Windows 客户端应用程序。使用 WPF，您可以创建广泛的独立应用程序以及浏览器承载的应用程序。 WPF 的核心是一个与...
WPF快速入门系列
08-27
Windows Presentation Foudation,WPF是下一代显示系统，用来生成能带给用户震撼视觉体验的Windows客户端应用程序。WPF的核心是一个与分辨率无关并且基于向量的程序引擎，目的在于利用现代图形硬件的优势。WPF在.NET ...
AutoUpdate软件自动更新，兼容wpf、winform
12-27
【原创】AutoUpdate软件自动更新，兼容wpf、winform，各项更新进度，更新内容说明等等，用户体验度上还不错！预览地址：https://blog.csdn.net/xukai515786/article/details/103727707
WPF MVVM示例讲解
09-03
WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的，WPF提供了数据绑定机制，当数据发生变化时，WPF会自动发出通知去更新UI，这篇文章通过示例让大家体验下WPF MVM，有需要的朋友可以...
WPF基础知识系例
lingshuangcanxue
11-28 1634
WPF图形与绘图
【wpf】Line缩放变换后线宽变化
kevinshift的博客
02-17 871
https://docs.microsoft.com/en-us/answers/questions/276944/wpf-line-stokethickness-seems-grow-as-line-is-scal.html
WPF几何绘图（2）
ybyfu的博客
11-11 652
（4）、QuadraticBezierSegment （二次贝塞尔曲线段）与BezierSegment类似
wpf linewidth linestyle combobox（线宽选择器）
realzuile的博客
11-27 663
wpf没有默认的线宽、线样式选择器，不过通过自制可以达到如下效果： 代码如下： <StackPanel Orientation="Horizontal" Margin="0 10 0 0"> <TextBlock Margin="13 0 0 0" VerticalAlignment="Center">Line Style:&...
WPF 线段Line过长渲染出现的问题
DC的陋室
11-14 5391
在使用WPF的时候，可以做一个实验，在canvas里添加一条线段Line，StrokeThickness属性设置为1，然后通过放大canvas或者调整line起终点，将线段变得很长，你会发现一个奇怪的问题：线段不见了。当你把StrokeThickness设置成2时，它又出现了。 CodeProject和StackOverFlow上也有人提出过类似的问题： =================
fluentUI wpf
最新发布
01-03
4. 良好的性能：Fluent UI WPF在设计时注重性能优化，能够高效地渲染和响应用户操作，同时支持高性能的数据绑定和布局管理。 5. 跨平台支持：Fluent UI WPF不仅适用于Windows平台，还支持其他平台（如MacOS和Linux）...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值