我有一个旋钮控制。围绕它，我想放置代表 LED 灯的 div。我不希望它们以 360° 围绕旋钮定位 - 而是从 135° 左右(左下角)开始，然后继续顺时针旋转到约 45° - 右下角 - 均匀分布(现在假设为 10x10 像素正方形的 div)。我有一个旋钮有 13 个 div，另一个旋钮有 15 个 div。我正在为此寻找一个 javascript 实现，非常感谢。
这是我到目前为止的代码，我知道这是简单的几何图形，我现在无法理解。这是第 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 函数
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;
}
将开始和结束 Angular 添加到函数参数中。
使开始和结束 Angular 更加明确
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
希望这能回答您的问题
关于javascript - 将 div 放置在具有起始 Angular 和结束 Angular 圆周围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54008991/