围绕中心圆分布圆圈
Distribute circles around a center circle
我正在尝试围绕一个中心圆圈放置六个圆圈。
它们中的每一个都具有相同的直径,因此应该可以将它们放置在中心周围而不 space 之间或重叠。
我想接近解决方案,但有一些小的重叠。
我找不到如何获得完美计算的答案。
这是我目前的结果:
这是我计算的方式:
this.distribute = function () {
var surfaceSize = this.surface.getAbsoluteSize(),
i,
x = 0,
y = 0;
// 7 CIRCLES 6 AFFECTED
for (i = 0; i < this.config.length; i += 1) {
var oBall = this.getBall(i);
if (i > 0) {
x = oBall.config.size.width * Math.sin(i);
y = oBall.config.size.height * Math.cos(i);
}
oBall.node.setPosition(x, y, 0);
}
};
提前致谢
玩60 deg === PI/3
:
http://jsfiddle.net/coma/nk0ms9hb/
var circles = document.querySelectorAll('div.circles > div');
Array.prototype.forEach.call(circles, function (circle, index) {
var angle = index * Math.PI / 3;
circle.style.top = Math.sin(angle) + 'em';
circle.style.left = Math.cos(angle) + 'em';
});
我正在使用 em 来简化计算,例如 2 * radius === 1em
我正在尝试围绕一个中心圆圈放置六个圆圈。 它们中的每一个都具有相同的直径,因此应该可以将它们放置在中心周围而不 space 之间或重叠。 我想接近解决方案,但有一些小的重叠。 我找不到如何获得完美计算的答案。
这是我目前的结果:
这是我计算的方式:
this.distribute = function () {
var surfaceSize = this.surface.getAbsoluteSize(),
i,
x = 0,
y = 0;
// 7 CIRCLES 6 AFFECTED
for (i = 0; i < this.config.length; i += 1) {
var oBall = this.getBall(i);
if (i > 0) {
x = oBall.config.size.width * Math.sin(i);
y = oBall.config.size.height * Math.cos(i);
}
oBall.node.setPosition(x, y, 0);
}
};
提前致谢
玩60 deg === PI/3
:
http://jsfiddle.net/coma/nk0ms9hb/
var circles = document.querySelectorAll('div.circles > div');
Array.prototype.forEach.call(circles, function (circle, index) {
var angle = index * Math.PI / 3;
circle.style.top = Math.sin(angle) + 'em';
circle.style.left = Math.cos(angle) + 'em';
});
我正在使用 em 来简化计算,例如 2 * radius === 1em