在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。
1.说明:在WPF中,文件下载时需要显示下载进度,由于系统自带的条型进度条比较占用空间,改用圆形的进度条,需要在DrawingVisual上呈现。
运行的效果如图:
private Point GetPointOnCir(Point CenterPoint, double r, double angel)
{
Point p = new Point();
p.X = Math.Sin(angel * Math.PI / 180) * r + CenterPoint.X;
p.Y = CenterPoint.Y - Math.Cos(angel * Math.PI / 180) * r;
return p;
}
private Geometry drawingArc(Point bigCirclefirstPoint, Point bigCirclesecondPoint, Point smallCirclefirstPoint, Point smallCirclesecondPoint, double bigCircleRadius, double smallCircleRadius,bool isLargeArc)
{
PathFigure pathFigure = new PathFigure { IsClosed = true };
pathFigure.StartPoint = bigCirclefirstPoint;
pathFigure.Segments.Add(
new ArcSegment
{
Point = bigCirclesecondPoint,
IsLargeArc = isLargeArc,
Size = new Size(bigCircleRadius, bigCircleRadius),
SweepDirection = SweepDirection.Clockwise
});
pathFigure.Segments.Add(new LineSegment { Point = smallCirclesecondPoint });
pathFigure.Segments.Add(
new ArcSegment
{
Point = smallCirclefirstPoint,
IsLargeArc = isLargeArc,
Size = new Size(smallCircleRadius, smallCircleRadius),
SweepDirection = SweepDirection.Counterclockwise
});
PathGeometry pathGeometry = new PathGeometry();
pathGeometry.Figures.Add(pathFigure);
return pathGeometry;
}
//根据已保存的大小和文件总大小来计算下载进度百分比
private Geometry GetGeometry()
{
bool isLargeArc =false;
double percent = double.Parse(Convert.ToString(savedSize)) / double.Parse(Convert.ToString(fileSize));
PercentString = string.Format("{0}%",Math.Round(percent*100,0));
double angel = percent * 360D;
if(angel>180)isLargeArc=true;
//double angel = 45;
double bigR = 16;
double smallR = 13;
Point centerPoint = vl.StartPoint;//new Point(100, 300);
Point firstpoint = GetPointOnCir(centerPoint, bigR, 0);
Point secondpoint = GetPointOnCir(centerPoint, bigR, angel);
Point thirdpoint = GetPointOnCir(centerPoint, smallR, 0);
Point fourpoint = GetPointOnCir(centerPoint, smallR, angel);
return drawingArc(firstp, secondpoint, thirdpoint, fourpoint, bigR, smallR, isLargeArc);
}
画圆形的进度条,实际上是动态画两个同心圆,根据文件保存的百分比来计算画弧形的角度的大小,需要7个参数:大圆的半径bigR 、小圆的半径smallR 、同心圆的圆心centerPoint 、大圆的起始点firstpoint 、大圆的结束点secondpoint 、小圆的起始点thirdpoint、小圆的结束点fourpoint
最后需要使用DrawingContext把圆给画出来:
public Visual drawShape()
{
DrawingVisual drawingWordsVisual = new DrawingVisual();
DrawingContext drawingContext = drawingWordsVisual.RenderOpen();
try
{
if (savedSize != fileSize)
{
drawingContext.DrawEllipse(null, new Pen(Brushes.Gray, 3), vl.StartPoint, 13, 13);
drawingContext.DrawGeometry(vs.VisualBackgroundBrush, vs.VisualFramePen, GetGeometry());
FormattedText formatWords = new FormattedText(PercentString, System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, currentStyle.VisualBackgroundBrush);
formatWords.SetFontWeight(FontWeights.Bold);
Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);
drawingContext.DrawText(formatWords, startPoint);
}
else
{
drawingContext.DrawEllipse(null, new Pen(Brushes.Green, 3), vl.StartPoint, 16, 16);
FormattedText formatWords = new FormattedText("Open", System.Globalization.CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface(vs.WordsFont.Name), vs.WordsFont.Size, Brushes.Red);
formatWords.SetFontWeight(FontWeights.Bold);
Point startPoint = new Point(vl.StartPoint.X - formatWords.Width / 2, vl.StartPoint.Y - formatWords.Height / 2);
drawingContext.DrawText(formatWords, startPoint);
} }
catch (Exception ex)
{
new SaveExceptionInfo().SaveLogAsTXTInfoex(ex.Message);
}
finally
{
drawingContext.Close();
}
return drawingWordsVisual;
}
在DrawingVisual上绘制圆形的进度条,类似于IOS系统风格。的更多相关文章
- 白鹭引擎 - 绘制圆形的进度条 ( graphics )
class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...
- 如何实现圆形的进度条(ProgressBar)
在我们实际的工作中可能经常使用到圆形的进度条,但是这是怎么实现的呢?其实这只不过是修改了一下ProgressBar的模板,我们在下面的代码中我们将ProgressBar的Value值绑定到Border ...
- Android 自定义圆形旋转进度条,仿微博头像加载效果
微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...
- JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- css3圆形百分比进度条的实现原理
原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...
- java进行文件上传,带进度条
网上看到别人发过的一个java上传的代码,自己写了个完整的,附带源码 项目环境:jkd7.tomcat7. jar包:commons-fileupload-1.2.1.jar.commons-io-1 ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- layui上传文件配合进度条
首先看一下效果图: 修改layui的源文件upload.js 1.打开layui/modules/upload.js 2.搜索ajax 3.找到url: 4.添加以下代码: ,xhr:l.xhr(fu ...
随机推荐
- C#------判断btye[]是否为空
public byte[] PhotoByte; //= new byte[byte.MaxValue]; if(PhotoByte == null) { MessageBox.Show(" ...
- mysql设置远程访问权限
查一下你的MYSQL用户表里, 是否允许远程连接 1.授权 mysql>grant all privileges on *.* to 'root'@'%' identified by ...
- sde用户下使用sqlplus登录错误ORA-12547: TNS:lost contact
环境:linux + oracle +arcsde 解决:root用户下增加$ORACLE_HOME/bin/oracle文件的s权限 [oracle@localhost bin]$ chmod ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 最终解决 mouseenter, mouseleave , mouseout mousehover mousemove等事件的区别?
在jquery中, html页面的div的显示和隐藏, 修改等的功能, 最终都要由 事件 触发来引用, 不管是键盘事件, 还是鼠标事件... mouseenter和mouseleave是成对对应的, ...
- [译]ES6新特性:八进制和二进制整数字面量
原文:http://whereswalden.com/2013/08/12/micro-feature-from-es6-now-in-firefox-aurora-and-nightly-binar ...
- PHP图像裁剪为任意大小的图像,图像不变形,不留下空白
<?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...
- 微信公共服务平台开发(.Net 的实现)12-------网页授权(上 :更加深入理解OAuth2.0 )
我们首先来认识一下OAuth协议吧,这个东西很早就听说过,总觉得离我很远(我的项目用不到这些),但是最近不得不学习一下了.我在网上找了一些解释,认为解释的最好的是这样说的(出处:http://hi.b ...
- 帝国CMS视频
http://list.youku.com/albumlist/show?id=17602333&ascending=1.html
- 内网安全工具之cain劫持工具
满足arp的条件为:目标IP为动态IP(arp -a查看) 下载地址:cain4.9.zip 官网:http://www.oxid.it/cain.html 08专版:cain08安装版 把cain下 ...