网站首页 > 知识剖析 正文
摘要
在WPF用户界面中,绘制2D图形内容的最简单方法是使用形状(shape)——专门用于表示简单的直线、椭圆、矩形以及多变形的一些类。从技术角度看,形状就是所谓的绘图图元(primitive)。可组合这些基本元素来创建更复杂的图形。
关于WPF中形状的重要细节是,它们都继承自FrameworkElement类。因此,形状是元素。这样会带来许多重要的结果:
形状绘制自身。不需要管理无效的情况和绘图过程。例如,当移动内容、改变窗口尺寸或改变形状属性时,不需要手动重新绘制形状。
使用与其他元素相同的方式组织形状。换句话说,可在前面学过的任何布局容器中放置形状(尽管Canvas明显是最有用的容器,因为它允许在特定的坐标位置放置形状,当构建复杂的具有多个部分的图画时,这很重要)。
形状支持与其他元素相同的事件。这意味着为了处理焦点、按下键盘、移动鼠标以及单击鼠标等,不必执行任何额外工作。可使用用于其他元素的相同事件集,并同样支持工具提示、上下文菜单和拖放操作。
正文
在WPF用户界面中,可以通过形状(Shape)来绘制直线、椭圆、矩形及一些多边形的类。通过这些基本的图像,组合成为复杂的图形。
Shape类中,主要的形状有Rectangle(),Ellipse(),Line,Polyline(),Polygon(),Path(),都继承自抽象类
System.Windows.Shapes.Shape。
名称 | 作用 |
Rectangle | 矩形 |
Ellipse | 椭圆 |
Line | 直线 |
Polyline | 一系列相互连接的直线 |
Polygon | 一系列连接的直线的闭合图像 |
Path | 将多个基本形状组合成单独的元素 |
<Grid>
<StackPanel>
<Rectangle Width="100" Height="60" Stroke="Blue" RadiusX="10" RadiusY="10" Fill="AntiqueWhite"/>
<Ellipse Fill="Yellow" Stroke="Red" Height="100" Width="180" Margin="10"></Ellipse>
</StackPanel>
</Grid>
Fill属性决定填充的颜色,Stroke边框颜色,在Rectangle类中多了RadiusX、RadiusY,决定了矩形圆角的大小。
使用Viewbox控件缩放形状
使用Canvas面板唯一的限制是不能改变图元自身的尺寸适应窗口大小。有些情况下,我们希望图元随着窗口大小改变尺寸,这样可以更好的利用可用空间。而使用Viewbox这个类只接受一个子元素,不过子元素可以是布局容器,在容器中可以包含其他元素。通常我们在Viewbox中放置Canvas,然后再Canvas面板中放置图形。
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0">第一行</TextBlock>
<Viewbox Grid.Row="1" HorizontalAlignment="Left">
<Canvas Height="150" Width="200">
<Ellipse Fill="Red" Stroke="Black"
Canvas.Left="10" Canvas.Top="10" Width="100" Height="50" HorizontalAlignment="Left"></Ellipse>
<Rectangle Fill="Beige" Stroke="Blue" Canvas.Left="62" Canvas.Top="75" Width="76" Height="50" HorizontalAlignment="Left"></Rectangle>
</Canvas>
</Viewbox>
</Grid>
在Viewbox中放置Canvas,Canvas中放置矩形和椭圆,随窗口大小改变进行缩放。
Line直线
由2个点来控制,X1点和X2点决定线段的起始位置,Line类中没有Fill属性,只能用Stroke属性填充线段的颜色,坐标原点在布局容器的左上角。
<Line Stroke="Blue" X1="0" Y1="0" X2="100" Y2="0" Margin="10"></Line>
Polyline折线
用多个连续的点控制,依次连接。
<Polyline Stroke="Blue" Points="0,0 20,60 40,0 60,60 80,0 100,100"></Polyline>
Polygon多边形
Polygon类和Polyline类相似,是一系列点的集合,不过最好加上了一条线,将第一个点和最后一根点连了起来。
<Polygon Stroke="DarkBlue" Points="200,200 5,200 400,90" Fill="Aqua"></Polygon>
猜你喜欢
- 2025-07-01 网页五指棋游戏(网页五指棋游戏在线玩)
- 2025-07-01 wasm真的比js快吗?(wasm.js)
- 2025-07-01 HarmonyOS NEXT仓颉开发语言实现画板案例
- 2025-07-01 SpriteJS:图形库造轮子的那些事儿
- 2025-07-01 把神秘指令丢给Claude、Gemini、DeepSeek,接下来,请见证奇迹!
- 2025-07-01 英文美文分享: Reflect and Evolve (反思与进化)
- 2025-07-01 好程序员:前端JavaScript全解析——Canvas绘制形状(下)
- 2025-07-01 Canvas学习笔记 | 文本操作(canvas文字)
- 2025-07-01 Canvas怎样修改线条的宽度、颜色和形状?
- 2025-07-01 html5精选特效代码分享(收藏)(html特效网站)
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)