将div放置在具有起始和终止角度的圆周围 [英] Placing divs around a circle with starting and ending angles
问题描述
我有一个旋钮控件.围绕这一点,我想放置代表LED灯的div.我不希望它们围绕旋钮以360°定位-而是从135°(左下)开始,然后沿顺时针方向旋转至约45°-右下-均匀分布(例如,现在以10x10像素为正方形的div).我的旋钮是13 divs,旋钮是15 divs,我很乐意为此寻找一个JavaScript实现.
I have a knob control. Around that, I would like to place divs that will represent LED lights. I do not want them positioned around the knob in 360° - but rather start around 135° (bottom left) and continue clockwise to about 45° - bottom right - distributed evenly (say divs of 10x10 pixels square for now). I'd have one knob with 13 divs, another knob with 15. I am looking for a javascript implementation for this, pretty please.
这是我到目前为止所拥有的代码,我知道它是简单的几何图形,目前我无法理解.这是第39行.
Here is the code I have so far, I know it's simple geometry which I can't get my head around at the moment. It's line 39.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
circle {
fill: steelblue;
fill-opacity: .8;
}
#canvas {
height: 250px;
width: 250px;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="250" height="250"></canvas>
<div id="canvas"></div>
<script>
var createNodes = function (numNodes, radius) {
var nodes = [],
width = (radius * 2) + 50,
height = (radius * 2) + 50,
angle,
x,
y,
i;
for (i=0; i<numNodes; i++) {
angle = (i / numNodes) * (Math.PI * 1.49) + (145 * (Math.PI / 180))//MAGIC NUMBERS, BAD
//angle = (i / (numNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed.
// For a semicircle, we would use (i / numNodes) * Math.PI.
x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
nodes.push({'id': i, 'x': x, 'y': y});
}
return nodes;
}
var createSvg = function (radius, callback) {
d3.selectAll('svg').remove();
var svg = d3.select('#canvas').append('svg:svg')
.attr('width', (radius * 2) + 50)
.attr('height', (radius * 2) + 50);
callback(svg);
}
var createElements = function (svg, nodes, elementRadius) {
element = svg.selectAll('circle')
.data(nodes)
.enter().append('svg:circle')
.attr('r', elementRadius)
.attr('cx', function (d, i) {
return d.x;
})
.attr('cy', function (d, i) {
return d.y;
});
}
var draw = function () {
var numNodes = 15;
var radius = 100;
var nodes = createNodes(numNodes, radius);
createSvg(radius, function (svg) {
createElements(svg, nodes, 5);
});
}
// Draw the SVG arc I want to place itens around.
var canvas = document.getElementById('myCanvas');
canvas.style.backgroundColor = '#dddddd';
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 0.8 * Math.PI;
var endAngle = 0.2 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
$(document).ready(function() {
draw();
});
</script>
</body>
</html>
推荐答案
更改了createNodes函数
changed your createNodes function
var createNodes = function (numNodes, radius,start,end) {
var nodes = [],
width = (radius * 2) + 50,
height = (radius * 2) + 50,
inc=(end-start)/(numNodes - 1),
angle,
x,
y,
i;
for (i=0; i<numNodes; i++) {
angle = start + i*inc;
x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
nodes.push({'id': i, 'x': x, 'y': y});
}
return nodes;
}
在函数参数中添加了起始角度和终止角度.
added the start and end angles to the function parms.
使起点和终点角度更加明确
To make the start and end angles more explicit
var startAngle = -1.25 * Math.PI; // same as 0.75 * Math.PI i.e adding 2*PI (360 deg)
var endAngle = 0.25 * Math.PI; // same as 2.25 * Math.PI
// or if you would like it in degrees
var startAngle=135/180 * Math.PI; // same as -225/180 i.e subtracting 360
var endAngle=405/180 * Math.PI; // same as 45/180
希望这能回答您的问题
这篇关于将div放置在具有起始和终止角度的圆周围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!