javascript - 需要有关非重叠文本的帮助

Question

我正在尝试创建不相互重叠的随机文本。我真的是编码新手，我尝试使用 Shiffman 的非重叠圆圈教程走到这一步，但我仍然无法创建所需的输出，请帮忙。

var textFunc = [];

function setup() {
  createCanvas(700, 400);

  // Lets make sure we don't get stuck in infinite loop
  var protection = 0;

  // Try to get to 500
  while (textFunc.length < 700) {
    // Pick a random Position
    var textDisp = {
      x: random(width),
      y: random(height)
    }

    // Does it overlap any previous circles?
    var overlapping = false;
    for (var j = 0; j < textFunc.length; j++) {
      var other = textFunc[j];
      var d = dist(textDisp.x, textDisp.y, other.x, other.y);
      if (d < textDisp.x && textDisp.x < other.y && other.y) {
        overlapping = true;
      }
    }

    // If not keep it!
    if (!overlapping) {
      textFunc.push(textDisp);
    }

    // Are we stuck?
    protection++;
    if (protection > 10000) {
      break;
    }
  }

  // Display all the Text
  for (var i = 0; i < textFunc.length; i++) {
    fill(random(255), random(100), random(0));
    noStroke();
    text('hahah', textFunc[i].x, textFunc[i].y);
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

最小距离取决于文本的宽度和高度。半径是穿过文本覆盖区域的对 Angular 线长度的一半。对 Angular 线的长度可以通过Math.hypot()来计算:

diagonal = Math.hypot(width, height)

通过textSize()定义文字的高度(大小) :

let textHeight = 12;
textSize(textHeight);

将文本添加到textDisp，通过textWidth()确定文本的宽度并计算半径:

let text = 'hahah'
let w = textWidth(text)
var textDisp = {
    x: random(width),
    y: random(height),
    t: text, 
    r: Math.hypot(w, textHeight) / 2
}

因此您可以计算半径并使用与 Ellipse No Overlap. 中相同的算法示例:

var d = dist(textDisp.x, textDisp.y, other.x, other.y);
if (d < textDisp.r + other.r) {
    overlapping = true;
}

要随机旋转文本，您必须向 textDisp 添加一个随机 Angular :

var textDisp = {
    // [...]
    a: random(180)-90,
    // [...]
}

使用translate()也将文本的中心移动到 (0, 0)。将文本旋转 rotate() , 其中radians()将 Angular 从度数转换为弧度。最后通过 translate() 将文本移动到它的位置。
push()分别pop()保存和恢复当前转换:

push();
translate(textFunc[i].x, textFunc[i].y);
rotate(radians(textFunc[i].a));
translate(-textWidth(textFunc[i].t)/2, textHeight/2);
text(textFunc[i].t, 0, 0);
pop();

看例子:

var textFunc = [];

function setup() {
    createCanvas(700, 400);

    // Lets make sure we don't get stuck in infinite loop
    var protection = 0;

    let textHeight = 12;
    textSize(textHeight);
    
    // Try to get to 500
    while (textFunc.length < 700) {
        // Pick a random Position
        let text = 'hahah'
        let w = textWidth(text)
        var textDisp = {
            x: random(width),
            y: random(height),
            a: random(180)-90,
            t: text, 
            r: Math.hypot(w, textHeight) / 2
        }

        // Does it overlap any previous circles?
        var overlapping = false;
        for (var j = 0; j < textFunc.length; j++) {
            var other = textFunc[j];
            
            var d = dist(textDisp.x, textDisp.y, other.x, other.y);
            if (d < textDisp.r + other.r) {
                overlapping = true;
            }
        }

        // If not keep it!
        if (!overlapping) {
            textFunc.push(textDisp);
        }

        // Are we stuck?
        protection++;
        if (protection > 10000) {
            break;
        }
    }

    // Display all the Text
    for (var i = 0; i < textFunc.length; i++) {
        fill(random(255), random(100), random(0));
        noStroke();
        push();
        translate(textFunc[i].x, textFunc[i].y);
        rotate(radians(textFunc[i].a));
        translate(-textWidth(textFunc[i].t)/2, textHeight/2);
        text(textFunc[i].t, 0, 0);
        pop();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>