在圆上对齐 n 圆圈>没有重叠

aligning n-circels on a circle > no overlapping

本文关键字:重叠 圆圈 对齐      更新时间:2023-09-26

用于数据可视化,im在圆上对齐n圆圈。这很好用 - 但我不知道如何停止圆圈相互重叠。这里有人知道怎么做吗?

结果应像下面草图一样工作:

链接: http://www.xup.to/dl,79345003/sketch.jpg

所以我不知道如何计算第二个节点的角度- 基于半径,第一个节点的位置 - 和秒的半径...

JSFIDDLE 来说明我的意思:http://jsfiddle.net/0z9hyvxk/

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);
canvas.width  = 500;
canvas.height = 500;
var midx     = 250;
var midy     = 250;
var radius   = 200;
var angle    = 0;
var count    = 30;
var step     = 2 * Math.PI / count;
var xpos;
var ypos;
var nodeSize;
var node = function(size){
    var dot = new createjs.Shape();
        dot.graphics.beginFill("#000").drawCircle(0, 0, size);
        dot.x = dot.y = -5;
        dot.alpha = .25;
    return dot
};
for(var i = 0; i<count; i++)
{
    xpos = radius * Math.cos(angle) + midx;
    ypos = radius * Math.sin(angle) + midx;
    nodeSize = i;
    var n = new node(nodeSize);
        n.x = xpos;
        n.y = ypos;
    stage.addChild(n)
    angle += step;
}
stage.update();

提前致谢西蒙

程序不会根据圆的大小和角度进行校正。较小的圆圈彼此相距太远,较大的圆圈太近。

r1 = radius of the n-th small circle
r2 = radius of the (n+1)-th small circle.
r3 = radius of the (n+2)-th small circle

r1<r2<3,所以 1 和 2 之间的角度小于 2 和 3 之间的角度。

尝试切向增加角度校正。我无法在工作中测试代码:(