silverlight 中绘制扇形(前台+后台)
来源:互联网 发布:元数据和数据的区别 编辑:程序博客网 时间:2024/05/16 10:59
以Y轴正方向为0度,顺时针递增,我们来做一个40度角的扇形,对称轴是Y轴。
前台:利用Blend
1、按住shift画出一个圆形,去掉生成的Ellipse对象的Margin、Stroke属性,添加 Width, Height属性值(目的为了能比较准确的切割)。
<Ellipse Fill="#FFF4F4F5" Width="200" Height="200"/>
2、在画一个矩形,去掉生成的Rectangle对象的VerticalAlignment属性,修改Height属性为圆形半径大小,修改Margin属性为距离顶部圆形半径的距离。
<Rectangle Fill="#FFF4F4F5" Height="100" Margin="0,100,0,0"/>
3、先选择圆形再选择矩形后右键->合并->相减,就可以得到一个半圆。
4、在做一个相同的矩形,在其转换属性里设置中心点中上(0.5,0),在设置其旋转70度(Y轴左右个20度),重复3的动作,得到一个扇形。
5、重复4的动作,只是旋转角度写-70或是110度,得到了最终的40度扇形。
PS:最后获得的是一个Path对象,
<Path Data="M34.209873,0 C44.565228,1.2682605E-06 54.552952,1.5740005 63.946861,4.4958038 L68.419853,6.0092916 L34.210033,100 L0,6.0092602 L4.4728832,4.4958038 C13.866797,1.5740012 23.854521,2.2721511E-06 34.209873,0 z" Fill="#FFF4F4F5" Height="100" Margin="165.79,50,165.79,0" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top"/>
后台:
方法1:这种方法就是通过XamlReader读取上面Blend画出的Path对象的XAML标识获得Path(扇形)。
string xaml = "<Path ";//引用 xaml += " xmlns=\"http://schemas.microsoft.com/client/2007\"";//创建属性 xaml += " Fill=\"#AE1E5E19\" Height=\"20\" RenderTransformOrigin=\"0.5,1\" Stretch=\"Uniform\"";xaml += string.Format(" Data=\"{0}\" />", "M34.209953,0 C44.565323,3.5734599E-06 54.55307,1.5740019 63.946991,4.4958062 L68.419983,6.0092931 L34.210087,100 L0,6.0092659 L4.4728961,4.4958062 C13.86683,1.5739993 23.854574,3.1432953E-07 34.209953,0 z");//创建路径对象 Path path;//<Path x:Name="ArcPath" Data=/>path = (Path)XamlReader.Load(xaml);
方法2:通过C代码生成,要根据角度计算偏移值。
public class BaseStation { /// <summary> /// 扇形的半径大小,更改其值会影响扇形大小。 /// </summary> private const int Radius = 10; public static Path GetBaseStation(double rotationAngle) { var path = new Path { Fill = new SolidColorBrush(Colors.Green), //以扇形的两直线连接顶点为几何中心进行定位和旋转。 RenderTransformOrigin = new Point(0.5, 1), Stretch = Stretch.None, UseLayoutRounding = false }; //以几何中心为准直线顶点的偏移值。 var offsetx = Radius * Math.Cos(20); var offsety = Radius * Math.Sin(20); //绘制起始直线 var startLine = new LineSegment() { Point = new Point(0 - offsetx, 0 - offsety) }; //绘制弧线,一条三次方贝塞尔曲线,Point1起点,Point2为峰值点,Point3为终点。 var arcLine = new BezierSegment() { Point1 = new Point(0 - offsetx, 0 - offsety), Point2 = new Point(0, 0 - Radius), Point3 = new Point(0 + offsetx, 0 - offsety) }; //绘制结束直线 var endLine = new LineSegment() { Point = new Point(0, 0) }; //把三条线段集合在一起。 var segments = new PathSegmentCollection { startLine, arcLine, endLine }; //为直线的Data赋值,由三段封闭的线段绘制成一个扇形 path.Data = new PathGeometry() { Figures = new PathFigureCollection() { new PathFigure() { StartPoint = new Point(0, 0), Segments = segments }} }; //设置扇形对称轴偏转角度。 path.RenderTransform = new CompositeTransform() { Rotation = rotationAngle }; return path; } }
通过类Path path= BaseStation.GetBaseStation(90);就可以获得对称轴为90度,角度为40的扇形。
当然还有最直接的方法:Arc类
命名空间: Microsoft.Expression.Shapes
程序集: Microsoft.Expression.Drawing(在 microsoft.expression.drawing.dll 中)
只需要几行代码就可以了,也可以在Blend里直接拖到页面上:
var arc = new Arc { Width = 250, Height = 250, ArcThickness = 1, ArcThicknessUnit = Microsoft.Expression.Media.UnitType.Percent, StartAngle = -20, EndAngle = 20, Stretch = Stretch.None, UseLayoutRounding = false, Stroke = new SolidColorBrush(Colors.Transparent), StrokeThickness = 1, };
- silverlight 中绘制扇形(前台+后台)
- Silverlight 中绘制扇形(前台+后台)
- cocos2d-x中绘制扇形
- 绘制扇形
- [Unity]利用Mesh在Unity中绘制扇形图片
- [Unity]利用Mesh在Unity中绘制扇形图片2
- 高速扇形绘制程序
- AS3绘制扇形
- AS3 扇形绘制
- Flex4绘制扇形
- UIBezierPath绘制扇形图
- iOS(扇形的绘制)
- css 绘制圆形 扇形
- [Unity]绘制扇形图形
- Django中前台传json格式后台
- 自定义AS3绘制扇形函数
- 扇形绘制(超低效率)
- 使用canvas绘制扇形图
- adb shell 命令
- asp.net控件开发基础(1)
- 编译原理学习(二)--终结符和非终结符
- java中遍历MAP的几种方法
- hdu2544最短路
- silverlight 中绘制扇形(前台+后台)
- 初学Java JNI(javac , javah)
- RS-232
- 【转载】Table锁定行列
- UIPageControl + UIScrollView 创建一个页面指示器控件
- Android系统build/core下.mk文件分析
- Exercises 4-14
- iis7.5+win2008 出现 HTTP Error 503. The service is unavailable.
- Oracle中recyclebin的保留策略