html 在一个圆环中拖动圆圈

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 在一个圆环中拖动圆圈相关的知识，希望对你有一定的参考价值。

Sometimes you might want to constrain a dragged item to a circular path...
<html>
<head>
	<title>ring control</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
	.handle{
		fill:#FFF;
		stroke:#000;
		stroke-width:4;
		cursor: all-scroll;
	}

	.handle.active{
		stroke:#F00;
	}

	.ring{
		fill:none;
		stroke:#000;
		stroke-width:4;
	}
	</style>
</head>
<body>
<div class="ring-input"></div>
</body>

<script type="text/javascript">
var values  = [
	{value:33, label:'A' },
	{value:33, label:'B' },
	{value:33, label:'C' },
	{value:33, label:'D' },
	{value:33, label:'E' }
];
var total = 0;
var dragging = null;

values.forEach(function(d){
 	d.absoluteValue = total;
 	total += d.value;
});

console.log(values);
var height = 300, width = 300, margin = {top:20,left:20,bottom:20,right:20};
var radius = (height - margin.top - margin.bottom)/2;

var parent = d3.select('.ring-input').append('svg')
	.attr({
		height:height,
		width:width
	}).append('g').attr('transform','translate('+margin.left+','+margin.top+')')

parent.append('line').attr('id','test-line')

var angularScale = d3.scale.linear().range([0,360]).domain([0,total]);

var ring = parent.append('g').attr('id','rim').attr('transform','translate('+radius+','+radius+')');
ring.append('circle').attr({
	r:radius,
	'class':'ring'
})

var handles = parent.append('g').attr('id','handles').attr('transform','translate('+radius+','+radius+')');
var drag = d3.behavior.drag()
    .origin(function(d) { return d; })
    .on("drag", dragmove)
    .on('dragend', function(){ d3.select(this).classed('active',false); });

//position the handles based on the input values
function drawHandles(){
	var join = handles.selectAll('circle').data(values);
	join.enter()
		.append('circle').attr({
			r:10,
			'class':'handle'
		}).on("mouseover", function(){
    		d3.select(this).classed('active',true);
    	})
    	.on("mouseout", function(){
    		d3.select(this).classed('active',false);
    	})
		.call(drag);

	join.attr({
		transform:function(d){
			return 'rotate(' + angularScale(d.absoluteValue) + ') translate(' +radius + ',0)'
		}
	})
}

drawHandles();

function dragmove(d,i) {
	d3.select(this).classed('active',true);
	var coordinates = d3.mouse(parent.node());
 	var x = coordinates[0]-radius;
 	var y = coordinates[1]-radius;
  	var newAngle = Math.atan2( y , x )* 57.2957795;
  	if(newAngle<0){
  		newAngle = 360 + newAngle;
  	}
 	d.absoluteValue = angularScale.invert(newAngle);
  	//REDRAW HANDLES
  	drawHandles()
}

</script>
</html>

以上是关于html 在一个圆环中拖动圆圈的主要内容，如果未能解决你的问题，请参考以下文章

基于Matlab的求均匀带电圆环，圆盘和圆圈在轴线上的电场的仿真图

利用圆圈轮廓面积求取圆环半径：cv2.findContours, contourArea

如何在IOS中绘制一个圆圈并移动它/拖动它？ [关闭]

在sketch上制作圆圈图表

用右键单击或滚轮单击窗口在 Python Kivy 中添加红色可拖动圆圈

Tableau 图表大全20之环形饼图