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

路径标绘一般通过<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中实现。只有下次完成了。。

时间: 2024-08-03 17:21:36

Silverlight学习(五)图形标绘的相关文章

HTML5 例子学习 HT 图形组件

HTML5 例子学习 HT 图形组件 HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.

数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇

HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打磨,如今 HT 算是达到了这样的效果,谈不上用尽洪荒之力,但我们对产品结果很满意,特别是 HT 的用户手册,将例子和文档无缝融合一体,小小 10 来兆开发包居然包含了四十五份手册,数百个活生生的 HTML5 例子,还没体验过的同学可以点击 http://www.hightopo.com/guide/

ArcGIS API for Silverlight 学习笔记

这里主要讲解展示不同的服务地图 先看一个实例: 新建一个Silverlight项目,在MainPage.xaml文件中,引入 ESRI.ArcGIS.Client 命名空间和 ESRI.ArcGIS.Client 所在的程序集 ESRI.ArcGIS.Client,并指定 该命名空间的名字为 esri,当然你也可以用自己的别名,比如myGIS. 接着写Map控件,并指定Map中的地图服务,一个简单的服务地图完成了,代码如下: <UserControl x:Class="ArcGISTile

【动态标绘演示系统】v2.0 Flex版

动态标绘演示系统v2.0主要用来满足各行业WebGIS系统中对动态标绘的需求而开发.该系统基于动态标绘API(Plot API)开发. 动态标绘API是基于ArcGIS API for Flex实现的一套功能组件.通过扩展,Plot API实现了类似ArcGIS API for Flex中DrawTool和EditTool的功能,可绘制.编辑(包括对标绘图形的旋转.缩放,对标绘图形  控制点的拖拽等)各种标绘图形,具有很强的灵活性和交互性. Plot API提供了包括箭标.旗标.区域标绘等11种

cesium1.65api版本贴地贴模型标绘工具效果(附源码下载)

前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内容概览 1.cesium1.65api版本贴地贴模型标绘工具效果2.源代码demo下载 效果图如下: 实现思路: 鼠标左键Cesium.ScreenSpaceEventType.LEFT_CLICK 鼠标移动Cesium.ScreenSpaceEventType.MOUSE_MOVE 鼠标右键Ces

动态标绘演示系统1.3

动态标绘演示系统1.3,基于动态标绘API 1.3,实现标绘符号绘制.形状编辑.样式编辑. 新增标绘符号保存与打开(通过序列化与反序列化接口实现). 该版本主要实现标绘符号的保存与打开,实现方式是把标绘符号序列化成json文本,提供序列化与反序列化接口. 简单起见,示例程序中采用保存.打开json文本文件的方式. 在实际项目中,可根据具体情况选择存储方式,比如数据库. 在线体验地址:http://gispace.duapp.com/plotdemo/index.html 源码下载 点击下载 欢迎

基于OpenLayers3的标绘API 开源啦

考虑到使用标绘的场景越来越多,已将基于OpenLayers3开发的标绘API开源. 感兴趣的同学可通过地址 http://git.oschina.net/ilocation/plot fork源代码. 欢迎感兴趣的同学贡献代码.

Beaglebone Back学习五(PWM测试)

PWM测试 参考链接 1 Enable PWM on BeagleBone with Device Tree overlays 2Using PWM on the Beaglebone Black 3 Beaglebone Coding 101: Buttons and PWM 4 Using PWM outputs 5 beaglebone-black-cpp-PWM 6 Enabling PWM Support in the kernel 7 Beaglebone Back学习五(PWM测试

Silverlight学习(四) domainservice动态多条件查询

上次讲了silverlight+MVVN+EF的简单框架,能够实现简单的数据CURD,但是多条件动态的查询一直没有实现.在网上查阅了很多资料,发现自己走了很多误区,代码很难调试正确. 这次的查询是基于上次的查询,只是增加了一个查询条件,动态多条件的查询的重点是获取查询的语言. 1 private string GetSql() 2 { 3 string query = "1=1"; 4 if (!string.IsNullOrEmpty(searchText.name)) 5 { 6