如何实现可拖拽并且显示百分比的环形进度条

fish_whale 2017-07-14 12:19:31

如图，小蓝点可以进行拖拽，随着蓝色部分的增加减少，圈内显示百分比随着着变化，请问应该怎么实现
...全文
1020 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_38182976 2019-03-15
  • 打赏
  • 举报
 回复
怎么在微信小程序上实现这个？急求 重金悬赏。
xluozhang123 2019-03-05
  • 打赏
  • 举报
 回复
这个怎么改成滑动到0点的时候不归零一直累加呢.
小鱼n_n 2018-01-16
  • 打赏
  • 举报
 回复
谢谢~谢谢~
引用 9 楼 jslang 的回复:
[quote=引用 8 楼 hellon_no 的回复:] [quote=引用 6 楼 jslang 的回复:] 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;

function offset(r,d) {//根据弧度与距离计算偏移坐标
	return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};

function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#99a";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0,2*Math.PI,true);
	ctx.stroke();
	ctx.strokeStyle = "#69f";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
	ctx.stroke();
	ctx.fillStyle = "#69f";
	ctx.font = "80px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(Math.round(n*100)+"%",ox,oy);
	ctx.fillStyle = "#00f";
	ctx.beginPath();
	var d =  offset(n*2*Math.PI,or);
	ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
	ctx.fill();
}

var on = ("ontouchstart" in document)? {
	start: "touchstart", move: "touchmove", end: "touchend"
} : {
	start: "mousedown", move: "mousemove", end: "mouseup"
};

function getXY(e,obj) {
	var et = e.touches? e.touches[0] : e;
	var x = et.clientX;
	var y = et.clientY;
	return {
		x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
		y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
	}
}

canvas.addEventListener(on.start, function(e) {
	moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
	if (moveFlag) {
		var k = getXY(e,canvas);
		var r = Math.atan2(k.x-ox, oy-k.y);
		draw((Math.PI+r)/(2*Math.PI));
	}
}, false);
canvas.addEventListener(on.end, function(e) {
	moveFlag = false;
}, false);

draw(0.2);
</script>

</body>
</html>
你好！这个圆形可拖拽进度条，如何把起始位置从底部变成顶部？[/quote] 更改这三行代码 return {x: Math.sin(r)*d, y: -Math.cos(r)*d}; ctx.arc(ox,oy,or,-0.5*Math.PI,(n*2-0.5)*Math.PI,false); var r = Math.atan2(ox-k.x, k.y-oy); [/quote]
天际的海浪 2018-01-16
  • 打赏
  • 举报
 回复
引用 8 楼 hellon_no 的回复:
[quote=引用 6 楼 jslang 的回复:] 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;

function offset(r,d) {//根据弧度与距离计算偏移坐标
	return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};

function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#99a";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0,2*Math.PI,true);
	ctx.stroke();
	ctx.strokeStyle = "#69f";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
	ctx.stroke();
	ctx.fillStyle = "#69f";
	ctx.font = "80px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(Math.round(n*100)+"%",ox,oy);
	ctx.fillStyle = "#00f";
	ctx.beginPath();
	var d =  offset(n*2*Math.PI,or);
	ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
	ctx.fill();
}

var on = ("ontouchstart" in document)? {
	start: "touchstart", move: "touchmove", end: "touchend"
} : {
	start: "mousedown", move: "mousemove", end: "mouseup"
};

function getXY(e,obj) {
	var et = e.touches? e.touches[0] : e;
	var x = et.clientX;
	var y = et.clientY;
	return {
		x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
		y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
	}
}

canvas.addEventListener(on.start, function(e) {
	moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
	if (moveFlag) {
		var k = getXY(e,canvas);
		var r = Math.atan2(k.x-ox, oy-k.y);
		draw((Math.PI+r)/(2*Math.PI));
	}
}, false);
canvas.addEventListener(on.end, function(e) {
	moveFlag = false;
}, false);

draw(0.2);
</script>

</body>
</html>
你好！这个圆形可拖拽进度条，如何把起始位置从底部变成顶部？[/quote] 更改这三行代码 return {x: Math.sin(r)*d, y: -Math.cos(r)*d}; ctx.arc(ox,oy,or,-0.5*Math.PI,(n*2-0.5)*Math.PI,false); var r = Math.atan2(ox-k.x, k.y-oy);
小鱼n_n 2018-01-16
  • 打赏
  • 举报
 回复
引用 6 楼 jslang 的回复:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;

function offset(r,d) {//根据弧度与距离计算偏移坐标
	return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};

function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#99a";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0,2*Math.PI,true);
	ctx.stroke();
	ctx.strokeStyle = "#69f";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
	ctx.stroke();
	ctx.fillStyle = "#69f";
	ctx.font = "80px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(Math.round(n*100)+"%",ox,oy);
	ctx.fillStyle = "#00f";
	ctx.beginPath();
	var d =  offset(n*2*Math.PI,or);
	ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
	ctx.fill();
}

var on = ("ontouchstart" in document)? {
	start: "touchstart", move: "touchmove", end: "touchend"
} : {
	start: "mousedown", move: "mousemove", end: "mouseup"
};

function getXY(e,obj) {
	var et = e.touches? e.touches[0] : e;
	var x = et.clientX;
	var y = et.clientY;
	return {
		x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
		y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
	}
}

canvas.addEventListener(on.start, function(e) {
	moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
	if (moveFlag) {
		var k = getXY(e,canvas);
		var r = Math.atan2(k.x-ox, oy-k.y);
		draw((Math.PI+r)/(2*Math.PI));
	}
}, false);
canvas.addEventListener(on.end, function(e) {
	moveFlag = false;
}, false);

draw(0.2);
</script>

</body>
</html>
你好！这个圆形可拖拽进度条，如何把起始位置从底部变成顶部？
fish_whale 2017-07-17
  • 打赏
  • 举报
 回复
谢谢~
引用 6 楼 jslang 的回复:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;

function offset(r,d) {//根据弧度与距离计算偏移坐标
	return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};

function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#99a";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0,2*Math.PI,true);
	ctx.stroke();
	ctx.strokeStyle = "#69f";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
	ctx.stroke();
	ctx.fillStyle = "#69f";
	ctx.font = "80px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(Math.round(n*100)+"%",ox,oy);
	ctx.fillStyle = "#00f";
	ctx.beginPath();
	var d =  offset(n*2*Math.PI,or);
	ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
	ctx.fill();
}

var on = ("ontouchstart" in document)? {
	start: "touchstart", move: "touchmove", end: "touchend"
} : {
	start: "mousedown", move: "mousemove", end: "mouseup"
};

function getXY(e,obj) {
	var et = e.touches? e.touches[0] : e;
	var x = et.clientX;
	var y = et.clientY;
	return {
		x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
		y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
	}
}

canvas.addEventListener(on.start, function(e) {
	moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
	if (moveFlag) {
		var k = getXY(e,canvas);
		var r = Math.atan2(k.x-ox, oy-k.y);
		draw((Math.PI+r)/(2*Math.PI));
	}
}, false);
canvas.addEventListener(on.end, function(e) {
	moveFlag = false;
}, false);

draw(0.2);
</script>

</body>
</html>
天际的海浪 2017-07-14
  • 打赏
  • 举报
 回复 

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var ox = 200;
var oy = 200;
var or = 180;
var br = 15;
var moveFlag = false;

function offset(r,d) {//根据弧度与距离计算偏移坐标
	return {x: -Math.sin(r)*d, y: Math.cos(r)*d};
};

function draw(n) {
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.strokeStyle = "#99a";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0,2*Math.PI,true);
	ctx.stroke();
	ctx.strokeStyle = "#69f";
	ctx.lineWidth = 5;
	ctx.beginPath();
	ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
	ctx.stroke();
	ctx.fillStyle = "#69f";
	ctx.font = "80px Arial";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(Math.round(n*100)+"%",ox,oy);
	ctx.fillStyle = "#00f";
	ctx.beginPath();
	var d =  offset(n*2*Math.PI,or);
	ctx.arc(ox+d.x,oy+d.y,br,0,2*Math.PI,true);
	ctx.fill();
}

var on = ("ontouchstart" in document)? {
	start: "touchstart", move: "touchmove", end: "touchend"
} : {
	start: "mousedown", move: "mousemove", end: "mouseup"
};

function getXY(e,obj) {
	var et = e.touches? e.touches[0] : e;
	var x = et.clientX;
	var y = et.clientY;
	return {
		x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
		y : y - obj.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop)
	}
}

canvas.addEventListener(on.start, function(e) {
	moveFlag = true;
}, false);
canvas.addEventListener(on.move, function(e) {
	if (moveFlag) {
		var k = getXY(e,canvas);
		var r = Math.atan2(k.x-ox, oy-k.y);
		draw((Math.PI+r)/(2*Math.PI));
	}
}, false);
canvas.addEventListener(on.end, function(e) {
	moveFlag = false;
}, false);

draw(0.2);
</script>

</body>
</html>
天际的海浪 2017-07-14
  • 打赏
  • 举报
 回复
可以通过canvas来做，应该不难
z153373846 2017-07-14
  • 打赏
  • 举报
 回复
圆点的旋转的思路可以通过固定一个圆圈大小的div，圆点默认底部居中，通过控制div旋转来实现圆点的进度效果
z153373846 2017-07-14
  • 打赏
  • 举报
 回复
蓝色圆可以通过canvas来话，圆点可以通过jq的mousedown，mousemove，mouseup来控制移动；具体的逻辑可以自己思考一下
fish_whale 2017-07-14
  • 打赏
  • 举报
 回复
引用 1 楼 u013116426 的回复:
http://blog.csdn.net/u010134293/article/details/49643299
我也看了这个，不过它是安卓，用JAVA写的，我想知道怎么用JS/JQuery配合canvas实现,亦或者SVG？
环形进度条
自定义圆形的进度条. 可自由设置进度,步长等参数.
MFC环形进度条控件demo
通过GDI绘图，继承CStatic实现的环形控件 类QT自定义控件实现 包含控件类，使用示例 重载Init函数，实现两种创建控件模式 自定义坐标创建和拖拽控件绑定模式 可以设置进度条的粗细，百分比字体显示大小 当然你们可以直接更改类内成员自己进行更合理的修改；简单易懂
Vue实现带进度条的文件拖动上传功能
主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
14种WEB常见进度条
平时搜集的,共享下.有好漂亮的有实用的.
完整版进度条高级设置.rar
完整版进度条高级设置.rar
JavaScript

87,997

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章