0

我想在以预设坐标为界的三角形内生成一组文本元素。例如; 像这样的东西。请注意，文本应位于粉红色三角形内。（文字剪掉三角形的线也没关系，因为三角形在最终产品中是不可见的，仅供参考）

为此，我创建了以下代码笔。

指定边界内的随机生成工作正常，但由于可能生成相同或非常接近的坐标，因此有时文本会重叠。

我可以采取任何可能的方法来有效地解决/避免这个问题吗？

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

function area(x1, y1, x2, y2, x3, y3) {
  return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0);
}

function isInside(x1, y1, x2, y2, x3, y3, x, y) {
  let A = area(x1, y1, x2, y2, x3, y3);

  let A1 = area(x, y, x2, y2, x3, y3);
  let A2 = area(x1, y1, x, y, x3, y3);
  let A3 = area(x1, y1, x2, y2, x, y);
  return (A == A1 + A2 + A3);
}

let canvas = document.querySelector('canvas')

const CANVAS_SIZE = 300

canvas.width = CANVAS_SIZE
canvas.height = CANVAS_SIZE

const ctx = canvas.getContext('2d');

let arrayOfText = ['A', 'B', 'C', 'D']

ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(225, 25);
ctx.lineTo(225, 225);
ctx.lineTo(25, 25);
ctx.strokeStyle = "#bb0874"
ctx.stroke()

ctx.font = `600 14px Arial`;

for (let i = 0; i < (arrayOfText.length); i++) {
  while (true) {
    let x = randomIntFromInterval(40, 180)
    let y = randomIntFromInterval(15, 160)
    if (isInside(25, 25, 225, 25, 225, 225, x, y)) {
      ctx.fillText(arrayOfText[i], x, y);
      break;
    }
  }
}
canvas {
  border: 1px solid black;
}
<body>
  <canvas></canvas>
</body>

4

0 回答 0