WPF 基础 - 绘画 1) 线段、矩形、圆弧及填充色
1. 绘画
1.1 图形类型
- Line
X1、Y1、X2、Y2,Stroke,StrokeThickness - Rectangle 矩形
- Ellipse 椭圆
- Polygon 多边形(自动闭合)
- Polyline 多变形(不自动闭合)
- Path
1.2 线段
<Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="3"/>
效果:
1.3 矩形及填充色
- SolidColorBrush 单色画刷
- LinearGradientBrush 线性渐画刷
- RadialGradientBrush 径向渐变画刷
- ImageBrush 图片
- DrawingBrush 矢量图和位图做填充
- VisualBrush 控件的
举例:
<WrapPanel>
<WrapPanel.Resources>
<Style TargetType="Rectangle">
<Setter Property="Width" Value="150"/>
<Setter Property="Height" Value="150"/>
<Setter Property="Margin" Value="10"/>
<Setter Property="Stroke" Value="Black"/>
</Style>
<LinearGradientBrush x:Key="DefaultColor">
<GradientStop Color="#ff4b1f" Offset="0.1"/>
<GradientStop Color="#1fddff" Offset="1"/>
</LinearGradientBrush>
</WrapPanel.Resources>
<Rectangle Fill="{StaticResource DefaultColor}"/>
<Rectangle>
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#999999" Offset="0"/>
<GradientStop Color="#555555" Offset="0.5"/>
<GradientStop Color="#111111" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="#999999" Offset="0"/>
<GradientStop Color="#555555" Offset="0.5"/>
<GradientStop Color="#111111" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="/Resources/Images/Cars/Audi.jpg"/>
</Rectangle.Fill>
</Rectangle>
<!--使用 Drawing 绘制区域,可用形状、文本、视频、图像或其他绘制项填充,这里使用形状-->
<Rectangle>
<Rectangle.Fill>
<DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource DefaultColor}">
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="10" RadiusY="10"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
<!--使用 Drawing 绘制区域,这里使用图像填充-->
<Rectangle>
<Rectangle.Fill>
<DrawingBrush Viewport="0,0,0.5,0.5" TileMode="Tile">
<DrawingBrush.Drawing>
<ImageDrawing ImageSource="/Resources/Images/Cars/Cayenne.jpg" Rect="0,0 0.5,0.5"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
<!--使用 System.Windows.Media.VisualBrush.Visual 绘制区域-->
<Rectangle>
<Rectangle.Fill>
<VisualBrush>
<VisualBrush.Visual>
<Ellipse Fill="{StaticResource DefaultColor}" Opacity="0.6" Stretch="Fill" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="100" Height="100"></Ellipse>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
</WrapPanel>
效果:
1.4 椭圆
<Ellipse Width="100" Height="100" Stroke="#FFBBDDDD">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.2, 0.5" RadiusX="0.5" RadiusY="0.5">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<RotateTransform CenterX="0" CenterY="0" Angle="30"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF225555" Offset="0"/>
<GradientStop Color="#FF336666" Offset="0.2"/>
<GradientStop Color="#FF558888" Offset="0.4"/>
<GradientStop Color="#FF88AAAA" Offset="0.6"/>
<GradientStop Color="#FFAACCCC" Offset="0.8"/>
<GradientStop Color="#FFCCEEEE" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
效果:
WPF 基础 - 绘画 1) 线段、矩形、圆弧及填充色的更多相关文章
- WPF 基础 - 绘画 2) Path
1. Path 霸中霸 既可以替代其他几种图形,也可以将直线.圆弧.贝尔赛曲线组合起来; 重要属性:Geometry Data: 其中 Geometry 为抽象类,不可实例化,可使用其子类: Line ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- WPF基础到企业应用系列6——布局全接触
本文转自:http://knightswarrior.blog.51cto.com/1792698/365351 一. 摘要 首先很高兴这个系列能得到大家的关注和支持,这段时间一直在研究Windows ...
- WPF 基础到企业应用系列索引
转自:http://www.cnblogs.com/zenghongliang/archive/2010/07/09/1774141.html WPF 基础到企业应用系列索引 WPF 基础到企业应用系 ...
- WPF笔记(1.1 WPF基础)——Hello,WPF!
原文:WPF笔记(1.1 WPF基础)--Hello,WPF! Example 1-1. Minimal C# WPF application// MyApp.csusing System;using ...
- [Qt扒手] PyQt5 基础绘画例子
[说明] 好吧,坦白从宽,我是Qt扒手(不要鄙视我).这是我根据qt官网提供的C++版本的例子(http://doc.qt.io/qt-5/qtwidgets-painting-basicdrawin ...
- WPF入门(三)->几何图形之矩形(RectangleGeometry)
原文:WPF入门(三)->几何图形之矩形(RectangleGeometry) 我们可以使用RectangleGeometry来绘制一个矩形或者正方形 RectangleGeometry 类:描 ...
- C# WPF基础巩固
时间如流水,只能流去不流回. 学历代表你的过去,能力代表你的现在,学习能力代表你的将来. 学无止境,精益求精. 一.写作目的 做C# WPF开发,无论是工作中即将使用,还是只应付跳槽面试,开发基础是非 ...
- C# WPF 歌词控件(支持逐字定位描色效果)
原文:C# WPF 歌词控件(支持逐字定位描色效果) 之前做了一个模仿网易云歌词的控件,实现了加载网易云歌词并能随音乐播放进度定位歌词.今天呢将在这个控件的基础上增加逐字定位描色功能,如下图效果(QQ ...
随机推荐
- LEETCODE - 1181【前后拼接】
class Solution { public: string gethead(string str){//获取头单词 string ret = ""; int strlen = ...
- 并发编程之java内存模型(Java Memory Model ,JMM)
一.图例 0.两个概念 Heap(堆):运行时的数据区,由垃圾回收负责,运行时分配内存(所以慢),对象存放在堆上 如果两个线程,同时调用同一个变量,怎两个线程都拥有,该对象的私有拷贝 (可以看一下,T ...
- springboot使用RestTemplate+httpclient连接池发送http消息
简介 RestTemplate是spring支持的一个请求http rest服务的模板对象,性质上有点像jdbcTemplate RestTemplate底层还是使用的httpclient(org.a ...
- CS144学习(2)TCP协议实现
Lab1-4 分别是完成一个流重组器,TCP接收端,TCP发送端,TCP连接四个部分,将四个部分组合在一起就是一个完整的TCP端了.之后经过包装就可以进行TCP的接收和发送了. 代码全部在github ...
- Promise nested then execute order All In One
Promise nested then execute order All In One Promise nested then nested Promise not return new Promi ...
- how to design a search component in react
how to design a search component in react react 如何使用 React 设计并实现一个搜索组件 实时刷新 节流防抖 扩展性,封装,高内聚,低耦合 响应式 ...
- MBP 2018
MBP 2018 touch pad MacBook Pro 如何调节键盘背光 https://support.apple.com/zh-cn/HT202310 F6 & F5 如何清洁 Ma ...
- LeetCode 刷题 App / LeetCode 题解 App
LeetCode 刷题 APP / LeetCode 题解 App 全端支持 http://leetcode-app.xgqfrms.xyz/ http://leetcode-desktop.xgqf ...
- js bitwise operation all in one
js bitwise operation all in one 位运算 & 按位与 | 按位或 ^ 按位异或 / XOR let a = 5; // 000000000000000000000 ...
- deep copy & deep merge
deep copy & deep merge JSON.parse(JSON.stringify(obj)); lodash https://lodash.com/docs/ https:// ...