前端,半圆弧形进度条怎么实现

图片说明

这样的进度条用代码怎么实现呢?插件的话那些进度条和设计的又不一样,大家有没有好的办法?

2个回答

可以用canvas 或者svg手写实现。吧填充的圆弧,换成小矩形就可以,不过需要不少时间

你可以把一个半圆转成有一定个数的小扇形组成的 这样的话根据需要的精度 设置每个扇形的弧度 就可以了

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
半圆弧形进度条
/** * Created by Administrator on 2016/5/27. */ import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.
css半圆 弧形
<div class="foot"> <!-- 两端对齐 --> <div class="foot-conter"></div> </div> .foot{ position: fixed;  bottom: 0; width: 100%; height: 250
安卓自定义半圆弧形菜单
安卓开发自定义ViewGroup实现半圆弧形菜单 ,可实时修改菜单按钮数量,效果如下使用方法1.布局文件添加一下属性:<com.yhongm.arcmenu.ArcMenu app:main_btn_img="@drawable/main_btn" //中心按钮的背景 android:id="@+id/arcMenu"android:layout_width="match_parent"andr
弧形进度条
传统的进度条要么横向要么纵向,遇到需求要呈现弧度形状的进度条时,这个就会对你有帮助!
ios-半圆进度条.zip
通第三方绘图框架 TKit 和 pop 绘制对应的半圆图形,通过Slider改变其对应的进度值!
Android自定义半圆进度条
android自定义半圆进度条,可以自己根据里面备注的参数,调整半圆的长度。这里是使用说明:http://blog.csdn.net/beibaokongming/article/details/79002646
android 渐变的半圆进度条
android 渐变的半圆进度条
css画半圆进度条
效果预期:半圆进度条白底,蓝色进度,随着分数的增长蓝色进度条增长。 CSS: .top{ width: 400px; height: 400px; top:-1px; background: #F1F5F8; border-radius: 50%; position: absolute;
android 条形ProgressBar半圆弧形进度
条形ProgressBar 半圆弧形进度 百分比的字符串跟随进度
Android绘制弧形进度条
在开发中,需要用到弧形进度条,上网上查了下,有个开源的绘制弧形进度条的,只是它的渐变颜色是分成四段,不是很美观,于是自己参考着做了一个,效果如下图: 这个进度条控件我是参考Radial-Menu-Widget-Android-master开源代码的RadialProgressActivity.java文件改的,修改的主要是它的onDraw函数,修改如下: protected v
弧形刻度进度条
https://github.com/Necat0r/SeekCircle https://github.com/lzyzsd/CircleProgress
android 弧形进度条
一个弧形进度条demo,类似于Progressbar和Seekbar。希望对大家有帮助。
弧形Dialog进度条
点击打开链接,免积分下载 MainActivity package com.example.waitprogress; import android.annotation.SuppressLint; import android.app.Activity; import android.os.Bundle; import android.os.Handler; imp
弧形渐变进度条
弧形或圆形的渐变进度条。你也可以去掉代码中的渐变处理,变成普通的弧形进度条。另外里面还有带动画效果
ios-弧形进度条.zip
这个一款简单的使用纯代码完成的弧形进度条,可以根据进度显示当前进度
弧形进度条,用到PorterDuffXfermode
UI设计师的审美观特别的好,做的UI也很好看。 先看设计图要求 分析: 渐变可以做,文字也都没什么问题,但是圆环外边的小突起怎么做?用画小渐变矩形?没有进度的灰色带边框的渐变圆弧怎么做? 太难了,最终选择的是用图片来做 图片如下,只上传了上圆环 图:bgBitmap 图:shadeBitmap 图:混合模式 关键点就
弧形进度条(动画版)
本博客只要没有注明“转”,那么均为原创,转贴请注明本博客链接链接   我们先把问题分解为下面3个小问题。 1.如何画一个弧形 2.如何让弧形带有加载过程 3.如何让进度值随着圆弧一起转动   1.我们先看看进度条的样子 进度条很简单,一段弧,较长的白色的弧是100%时候的样子,较短红色的弧形是当前的进度。 这里我选用的是圆弧,弧度为240度,这里要注意一下,我选用的是角度制...
任意角度弧形进度条
简述 绘制一个270°的弧形进度条,根据所传入的分数显示进度位置。(可根据需要调整自己的度数) 思想 将一个正方形分为左右两个矩形 左右矩形各画半圆(实际是一个圆超出部分被隐藏了) 左边用180°半圆,右边用90°弧形(transform:rotate()旋转得到)--------底色拼完 进度条颜色初始通过旋转隐藏 通过计算得到相应分数的进度条旋转度数 例子参数 可以先看文章最后的效果...
对简易弧形进度条的实现的理解
图A:这种进度条100%就是一整个圆        图B:这种进度条100%是从-240度到30度,样式根据开发需要随意设置,下面具体谈实现 第一步:用UIView类写一个方法使用CAShapeLayer和UIBezierPath画出完整的圆形轨道,方法名为 - (void)drawProgress; #define degreesToRadians(x) (M_PI*(x)/
Android-SemicircleProgress弧形进度条和圆形扩散进度条
SemicircleProgress 弧形进度条和圆形扩散进度条
自定义绘制圆形和弧形进度条
package com.example.administrator.sildslipyang.View; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import andro
Andorid自定义拖动弧形进度条
在android自定义控件中,我们使用进度显示,为了好看,一般都不会用系统自带的。原因大家都懂的。而现在各种自定义进度条显示也是层出不穷,在实际开发中遇到的情况是需要带拖动效果的弧形进度条。
android弧形进度条,有详细注释!
android弧形进度条,有详细注释的,比较简单,感兴趣的朋友可以来看看。rn[img=http://img.my.csdn.net/uploads/201303/10/1362918937_3512.png][/img]rnrn[code=java]rnpackage com.demo.eric.views;rnrnimport android.content.Context;rnimport android.graphics.Canvas;rnimport android.graphics.Color;rnimport android.graphics.Paint;rnimport android.graphics.Paint.Style;rnimport android.graphics.RectF;rnimport android.util.AttributeSet;rnimport android.view.View;rnrn/**rn * 弧形进度条rn * rn * @author Ericrn * rn */rnpublic class ArcProgressbar extends View rnrn public ArcProgressbar(Context context) rn super(context);rn rnrn public ArcProgressbar(Context context, AttributeSet attrs) rn super(context, attrs);rn rnrn @Overridern protected void onDraw(Canvas canvas) rn super.onDraw(canvas);rn init(canvas);rn rnrn private void init(Canvas canvas) rn // 画弧形的矩阵区域。rn rectBg = new RectF(15, 15, diameter, diameter);rnrn // 计算弧形的圆心和半径。rn int cx1 = (diameter + 15) / 2;rn int cy1 = (diameter + 15) / 2;rn int arcRadius = (diameter - 15) / 2;rn // ProgressBar结尾和开始画2个圆,实现ProgressBar的圆角。rn mPaintCircle = new Paint();rn mPaintCircle.setAntiAlias(true);rn mPaintCircle.setColor(bgColor);rn rn canvas.drawCircle(rn (float) (cx1 + arcRadius * Math.cos(startAngle * 3.14 / 180)),rn (float) (cy1 + arcRadius * Math.sin(startAngle * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rnrn canvas.drawCircle(rn (float) (cx1 + arcRadiusrn * Math.cos((180 - startAngle) * 3.14 / 180)),rn (float) (cy1 + arcRadiusrn * Math.sin((180 - startAngle) * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rnrn // 弧形背景。rn mPaintBg = new Paint();rn mPaintBg.setAntiAlias(true);rn mPaintBg.setStyle(Style.STROKE);rn mPaintBg.setStrokeWidth(bgStrokeWidth);rn mPaintBg.setColor(bgColor);rn canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintBg);rnrn // 弧形小背景。rn if (showSmallBg) rn mPaintSmallBg = new Paint();rn mPaintSmallBg.setAntiAlias(true);rn mPaintSmallBg.setStyle(Style.STROKE);rn mPaintSmallBg.setStrokeWidth(barStrokeWidth);rn mPaintSmallBg.setColor(smallBgColor);rn canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintSmallBg);rn rnrn // 弧形ProgressBar。rn mPaintBar = new Paint();rn mPaintBar.setAntiAlias(true);rn mPaintBar.setStyle(Style.STROKE);rn mPaintBar.setStrokeWidth(barStrokeWidth);rn mPaintBar.setColor(barColor);rn canvas.drawArc(rectBg, startAngle, progress, false, mPaintBar);rnrn // 随ProgressBar移动的圆。rn if (showMoveCircle) rn mPaintCircle.setColor(barColor);rn canvas.drawCircle(rn (float) (cx1 + arcRadiusrn * Math.cos(angleOfMoveCircle * 3.14 / 180)),rn (float) (cy1 + arcRadiusrn * Math.sin(angleOfMoveCircle * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rn rnrn invalidate();rn rnrn /**rn * rn * @param progressrn */rn public void addProgress(int _progress) rn progress += _progress;rn angleOfMoveCircle += _progress;rn System.out.println(progress);rn if (progress > endAngle) rn progress = 0;rn angleOfMoveCircle = startAngle;rn rn invalidate();rn rnrn /**rn * 设置弧形背景的画笔宽度。rn */rn public void setBgStrokeWidth(int bgStrokeWidth) rn this.bgStrokeWidth = bgStrokeWidth;rn rnrn /**rn * 设置弧形ProgressBar的画笔宽度。rn */rn public void setBarStrokeWidth(int barStrokeWidth) rn this.barStrokeWidth = barStrokeWidth;rn rnrn /**rn * 设置弧形背景的颜色。rn */rn public void setBgColor(int bgColor) rn this.bgColor = bgColor;rn rnrn /**rn * 设置弧形ProgressBar的颜色。rn */rn public void setBarColor(int barColor) rn this.barColor = barColor;rn rnrn /**rn * 设置弧形小背景的颜色。rn */rn public void setSmallBgColor(int smallBgColor) rn this.smallBgColor = smallBgColor;rn rnrn /**rn * 设置弧形的直径。rn */rn public void setDiameter(int diameter) rn this.diameter = diameter;rn rnrn /**rn * 是否显示小背景。rn */rn public void setShowSmallBg(boolean showSmallBg) rn this.showSmallBg = showSmallBg;rn rnrn /**rn * 是否显示移动的小圆。rn */rn public void setShowMoveCircle(boolean showMoveCircle) rn this.showMoveCircle = showMoveCircle;rn rnrn private int bgStrokeWidth = 44;rn private int barStrokeWidth = 15;rn private int bgColor = Color.GRAY;rn private int barColor = Color.RED;rn private int smallBgColor = Color.WHITE;rn private int progress = 0;rn private int angleOfMoveCircle = 140;// 移动小园的起始角度。rn private int startAngle = 140;rn private int endAngle = 260;rn private Paint mPaintBar = null;rn private Paint mPaintSmallBg = null;rn private Paint mPaintBg = null;rn private Paint mPaintCircle = null;rn private RectF rectBg = null;rn /**rn * 直徑。rn */rn private int diameter = 450;rnrn private boolean showSmallBg = true;// 是否显示小背景。rn private boolean showMoveCircle = true;// 是否显示移动的小园。rnrnrnrn[/code]
自定义View之旋转的弧形进度条
先上图(没图说个锤子),图满意,在往下走,代码不多,一看就懂; CircleArcView .java import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import andr...
Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改
Android自定义半圆进度条 半圆渐变色进度条带指示 半圆开口大小可自由修改 首先我们来看下效果图 不同的开口大小只需要修改一个参数即可 半圆1: 半圆2: 半圆3: 如果是你想要的效果,就直接滑动到文章底部,下载源码,然后结合本文章操作说明集成到自己的项目中吧 如果集成 第一步: 下载项目解压,然后用as打开。 第二步: 复制SemicircleProgr
【前端CSS3】CSS3实现进度条
1、使用keyframe实现 // html结构 &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;progress&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;progress-bar&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div class=&amp
半圆弧形越变越大的Loading动画素材-flash.rar
半圆弧形越变越大的Loading动画素材-flash源文件,蓝色风格,像仪表盘,随着Flash的加载,半弧形越来越大,最后呈现一个半圆形,flash加载完成。
如何做一个类似于课程格子的那种弧形半圆菜单?
在做一个课设作业,要做一个Android应用,想要一个像课程格子的那种下面的弧形半圆菜单,就是课程格子打开后最下面那个点击后旋转出现半圆弧形菜单……不知道如何做……表示没怎么做过Android应用,新手压力很大……有没有人知道怎么做,或者知道有类似效果源码的……求给一份参考一下……
Android 半圆矩形的实现
新建一个项目 我命名为ARectangle,在res目录下新建drawable包,在这个包下新建a_rectangle.xml,写入代码 <selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_short
css实现半圆和圆
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;半圆角&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; di
echarts实现半圆饼图
var myChart = this.$echarts.init(document.getElementById('myChart')) let data = [ { value: 57, name: '半年分配', itemStyle: { normal: { ...
loading 半圆css实现
isplay: inline-block; box-sizing: border-box; width: 18px; height: 18px; margin-right: 15px; border: 2px solid transparent; border-top-color: #0855c6; border-left-color: #0855c6; border-radius...
使用canvas画圆形(弧形)进度条
效果如下: 可以展示整个圆、半圆以及任意角度弧形(左右对称)的进度条。整体思路如下: 先确定展示的形状,是整个圆、半圆还是一般的弧形 把确定好形状的圆弧均分100等份,计算出每一份所占的弧度 灰色圆弧占100份,红色圆弧最终占的份数由参数确定 设置setInterval定时器,重复执行画图操作 清空画布 先画灰色的圆弧,占100份...
android弧形进度条(自定义视图),有详细注释!
rnandroid弧形进度条,有详细注释的,比较简单,感兴趣的朋友可以来看看。rn[img=http://img.my.csdn.net/uploads/201303/10/1362887744_3471.png][/img]rn[code=java]rnpackage com.demo.eric.views;rnrnimport android.content.Context;rnimport android.graphics.Canvas;rnimport android.graphics.Color;rnimport android.graphics.Paint;rnimport android.graphics.Paint.Style;rnimport android.graphics.RectF;rnimport android.util.AttributeSet;rnimport android.view.View;rnrn/**rn * 弧形进度条rn * rn * @author Ericrn * rn */rnpublic class ArcProgressbar extends View rnrn public ArcProgressbar(Context context) rn super(context);rn rnrn public ArcProgressbar(Context context, AttributeSet attrs) rn super(context, attrs);rn rnrn @Overridern protected void onDraw(Canvas canvas) rn super.onDraw(canvas);rn init(canvas);rn rnrn private void init(Canvas canvas) rn // 画弧形的矩阵区域。rn rectBg = new RectF(15, 15, diameter, diameter);rnrn // 计算弧形的圆心和半径。rn int cx1 = (diameter + 15) / 2;rn int cy1 = (diameter + 15) / 2;rn int arcRadius = (diameter - 15) / 2;rn // ProgressBar结尾和开始画2个圆,实现ProgressBar的圆角。rn mPaintCircle = new Paint();rn mPaintCircle.setAntiAlias(true);rn mPaintCircle.setColor(bgColor);rn rn canvas.drawCircle(rn (float) (cx1 + arcRadius * Math.cos(startAngle * 3.14 / 180)),rn (float) (cy1 + arcRadius * Math.sin(startAngle * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rnrn canvas.drawCircle(rn (float) (cx1 + arcRadiusrn * Math.cos((180 - startAngle) * 3.14 / 180)),rn (float) (cy1 + arcRadiusrn * Math.sin((180 - startAngle) * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rnrn // 弧形背景。rn mPaintBg = new Paint();rn mPaintBg.setAntiAlias(true);rn mPaintBg.setStyle(Style.STROKE);rn mPaintBg.setStrokeWidth(bgStrokeWidth);rn mPaintBg.setColor(bgColor);rn canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintBg);rnrn // 弧形小背景。rn if (showSmallBg) rn mPaintSmallBg = new Paint();rn mPaintSmallBg.setAntiAlias(true);rn mPaintSmallBg.setStyle(Style.STROKE);rn mPaintSmallBg.setStrokeWidth(barStrokeWidth);rn mPaintSmallBg.setColor(smallBgColor);rn canvas.drawArc(rectBg, startAngle, endAngle, false, mPaintSmallBg);rn rnrn // 弧形ProgressBar。rn mPaintBar = new Paint();rn mPaintBar.setAntiAlias(true);rn mPaintBar.setStyle(Style.STROKE);rn mPaintBar.setStrokeWidth(barStrokeWidth);rn mPaintBar.setColor(barColor);rn canvas.drawArc(rectBg, startAngle, progress, false, mPaintBar);rnrn // 随ProgressBar移动的圆。rn if (showMoveCircle) rn mPaintCircle.setColor(barColor);rn canvas.drawCircle(rn (float) (cx1 + arcRadiusrn * Math.cos(angleOfMoveCircle * 3.14 / 180)),rn (float) (cy1 + arcRadiusrn * Math.sin(angleOfMoveCircle * 3.14 / 180)),rn bgStrokeWidth / 2, mPaintCircle);// 小圆rn rnrn invalidate();rn rnrn /**rn * rn * @param progressrn */rn public void addProgress(int _progress) rn progress += _progress;rn angleOfMoveCircle += _progress;rn System.out.println(progress);rn if (progress > endAngle) rn progress = 0;rn angleOfMoveCircle = startAngle;rn rn invalidate();rn rnrn /**rn * 设置弧形背景的画笔宽度。rn */rn public void setBgStrokeWidth(int bgStrokeWidth) rn this.bgStrokeWidth = bgStrokeWidth;rn rnrn /**rn * 设置弧形ProgressBar的画笔宽度。rn */rn public void setBarStrokeWidth(int barStrokeWidth) rn this.barStrokeWidth = barStrokeWidth;rn rnrn /**rn * 设置弧形背景的颜色。rn */rn public void setBgColor(int bgColor) rn this.bgColor = bgColor;rn rnrn /**rn * 设置弧形ProgressBar的颜色。rn */rn public void setBarColor(int barColor) rn this.barColor = barColor;rn rnrn /**rn * 设置弧形小背景的颜色。rn */rn public void setSmallBgColor(int smallBgColor) rn this.smallBgColor = smallBgColor;rn rnrn /**rn * 设置弧形的直径。rn */rn public void setDiameter(int diameter) rn this.diameter = diameter;rn rnrn /**rn * 是否显示小背景。rn */rn public void setShowSmallBg(boolean showSmallBg) rn this.showSmallBg = showSmallBg;rn rnrn /**rn * 是否显示移动的小圆。rn */rn public void setShowMoveCircle(boolean showMoveCircle) rn this.showMoveCircle = showMoveCircle;rn rnrn private int bgStrokeWidth = 44;rn private int barStrokeWidth = 15;rn private int bgColor = Color.GRAY;rn private int barColor = Color.RED;rn private int smallBgColor = Color.WHITE;rn private int progress = 0;rn private int angleOfMoveCircle = 140;// 移动小园的起始角度。rn private int startAngle = 140;rn private int endAngle = 260;rn private Paint mPaintBar = null;rn private Paint mPaintSmallBg = null;rn private Paint mPaintBg = null;rn private Paint mPaintCircle = null;rn private RectF rectBg = null;rn /**rn * 直徑。rn */rn private int diameter = 450;rnrn private boolean showSmallBg = true;// 是否显示小背景。rn private boolean showMoveCircle = true;// 是否显示移动的小园。rnrnrnrnrnrnrn[/code]
android自定义的弧形进度条和圆形进度条-SemicircleProgress
SemicircleProgress两个自定义圆形和弧形进度条githu地址:https://github.com/ppg408331701/SemicircleProgress第一个SemicircleProgress可以对中间和下面的字自定义第二个CircularProgressar可以对文字部分定义,对图片自定义,显示或隐藏,与详细需要请直接拖到本地自己修改对于Android Studio的用
怎么做一个弧形进度条,类似油表那个
是一格一格的,颜色可能不同.我现在用Shape做,但没办法做成弧形的.控件应该是不能旋转的吧.还有没有其它办法
自定义弧形进度条,百分比的值在变化
package com.example.lianxiday03_02customcircle.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graph
自定义进度条&自定义弧形进度条(附带动画效果)
用canvas自定义弧形进度条以及可滑动的带状态值条形进度条,并实现进度动画。
Silverlight 的 弧形滑动效果是怎么实现的
[url=http://www.rai.tv/dl/RaiTV/homeTv.html][/url]这个网站的滑动效果很酷,想知道是怎么实现的,如果有这个效果的示例代码能给我的话,那就更好了,非常的感谢
svg实现弧形文字
~~这个用的不是很熟,我就直接贴代码了就是用了二次赛贝尔曲线,一个起始点一个结束点还有中间两个点,过了弧度的切线一个链接起始点一个链接结束点 &amp;lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&amp;gt;            &amp;lt;defs&amp;gt;  ...
相关热词 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图 c# 验证码图片生成类 c# 再次尝试 连接失败 c#开发编写规范 c# 压缩图片好麻烦 c#计算数组中的平均值 c#获取路由参数