Silverlight学习(五)图形标绘
Silverlight中进行图形标绘的方法太多了,这里的标绘和Arcgis中的标绘不同,这里大多是静态的标绘。标绘的方法主要有Path(路径标记法)、直接标绘(Line等)、几何标记(LineGeometry等)。
1.路径标记法
路径标记在silverlight中是非常重要的一种标绘方法,通过路径标记,我们可以标绘多种形状的曲线或者直线。下面直接直接上代码。
1 <Path Stroke="Blue" Data="M 0,0 L 0,0 10,10 20,20 50,50"></Path>
2 <Path Stroke="Red" Data="M 50,50 H 60 80 150"></Path>
3 <Path Stroke="Green" Data="M 150,50 V 50 150"></Path>
4
5 <Path Stroke="GreenYellow" Data="M 100,200 C 100,25 400,350 400,175 H 280" StrokeThickness="3"></Path>
路径标绘一般通过<Path Data=""/>,在Data中是标绘的主要部分,M代表起始点,点的表示形式为(x,y),L表直线,H表示水平线,V表示垂直线,C表示三次方贝塞尔曲线。若图形需要封闭,用Z表示结束。Stroke表示轮廓线的颜色。StrokeThickness是指线段的宽度。
2.图表标绘
silverlight中提供了Line、PolyLine、Polygon、Eclipse、Rectangle等几种标绘类型。
Line,可以在画布中画一条直线,需要制定起点(X1,Y1),终点(X2,Y2),线的颜色和线的宽度等。
PolyLine,是多段线,需要指定它的Points,Points是点的集合。
Polygon,是多边形,同样需要指定Points。
Eclipse是椭圆。。。
Rectangle是矩形。在这里需要讲讲颜色的渐变。silverlight中包含两种渐变方式:LinearGradientBrush和RadialGradientBrush。
LinearGradientBrush是指线性渐变,它可以演化为多种渐变方式,比如水平渐变、垂直渐变、斜线渐变。
1 <Rectangle Width="200" Height="50" Canvas.Left="100" Canvas.Top="250">
2 <Rectangle.Fill>
3 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
4 <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
5 <GradientStop Color="Red" Offset="0.25"></GradientStop>
6 <GradientStop Color="Blue" Offset="0.75"></GradientStop>
7 <GradientStop Color="LimeGreen" Offset="1.0"></GradientStop>
8 </LinearGradientBrush>
9 </Rectangle.Fill>
10 </Rectangle>
斜线渐变也就是设置直线的起点(0,0),终点(1,1)。
1 <Rectangle Width="200" Height="50" Canvas.Left="50" Canvas.Top="310">
2 <Rectangle.Fill>
3 <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
4 <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
5 <GradientStop Color="Red" Offset="0.25"></GradientStop>
6 <GradientStop Color="Blue" Offset="0.75"></GradientStop>
7 <GradientStop Color="LimeGreen" Offset="1.0"></GradientStop>
8 </LinearGradientBrush>
9 </Rectangle.Fill>
10 </Rectangle>
水平渐变设置起点(0,0.5),终点(1,0.5),水平渐变需要保证Y轴的值无变化
1 <Rectangle Width="200" Height="50" Canvas.Left="300" Canvas.Top="300">
2 <Rectangle.Fill>
3 <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
4 <GradientStop Color="Yellow" Offset="0.0"></GradientStop>
5 <GradientStop Color="Red" Offset="0.25"></GradientStop>
6 <GradientStop Color="Blue" Offset="0.75"></GradientStop>
7 <GradientStop Color="LimeGreen" Offset="1.0"></GradientStop>
8 </LinearGradientBrush>
9 </Rectangle.Fill>
10 </Rectangle>
垂直渐变需要保证的是x轴的值无变化,比如设置起点(0.5,0),终点(0.5,1)。
RadialGradientBrush是径向渐变的方式,它从一个中心点,以圆的方式渐变颜色。
1 Rectangle Width="50" Height="50" Canvas.Left="150" Canvas.Top="200">
2 <Rectangle.Fill>
3 <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5">
4 <GradientStop Color="Yellow" Offset="0"></GradientStop>
5 <GradientStop Color="Red" Offset="0.25"></GradientStop>
6 <GradientStop Color="Blue" Offset="0.75"></GradientStop>
7 <GradientStop Color="LimeGreen" Offset="1.0"></GradientStop>
8 </RadialGradientBrush>
9 </Rectangle.Fill>
10 </Rectangle>
这里需要设置Centetr 和GradientOrigin,center是中心点,Gradient是径向渐变轴的起点。
3.几何标绘
几何标绘通过LineGeometry、EllipseGeometry、RectangleGeometry等。通过几何标绘,我们可以标绘复杂的图形。这里不做详细说明。
本来是打算结合Blend来写的,但是由于时间太过仓促,没有在blend中实现。只有下次完成了。。
- 【Android基础】Activity的生命周期函数
- 七种常用回归技术,如何正确选择回归模型?
- 爬取拉勾网大数据相关岗位薪资信息存到excel,并作数据分析
- 【Windows编程】系列第五篇:GDI图形绘制
- 抓取链家官网北京房产信息并用python进行数据挖掘
- 用R语言做钻石价格预测
- 2分钟完成30*15页拉勾网职位需求关键词的抓取
- 【专业技术】Linux设备驱动第七篇:高级字符驱动操作之阻塞IO
- Python抓取上海各地区房价平均值
- R语言分析 老九门 到底谁是主角
- 【编程基础】C语言位
- 【专业技术】Android数据保存之文件保存
- 手工创建/删除数据库的步骤
- 用shell帮助解决ORA问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Chrome终于上线这项重磅功能,中国用户苦等多年!
- YOLO 算法最全综述:从 YOLOv1 到 YOLOv5
- 《JavaScript ES6 函数式编程入门经典》读书笔记
- Java9-Reactive Stream API响应式编程
- mybatis-plus增删改查以及前后端分离模式下的项目应用
- docker(常用软件安装)
- PyTorch版:集成注意力和MobileNet的YOLOv4
- 从源代码级别看懂MinIO对象存储网关的实现
- 4种主流超参数调优技术
- 一分钟学Python| 面向对象(上)
- Python 为什么不支持 switch 语句?
- 你还在认为 count(1) 比 count(*) 效率高?
- 一分钟学Python| 面向对象(中)
- uni-app自定义打包目录package.json命令配置
- 在Zeppelin中如何使用Hive