Динамически упорядочить элементы в треугольнике? - PullRequest
Новая
       15

Динамически упорядочить элементы в треугольнике?

2 голосов
/ 09 февраля 2012

Я ищу функцию JS для динамического расположения элементов в треугольнике, как на этом рисунке:

Ответы [ 3 ]

2 голосов
/ 10 февраля 2012

Попробуйте это: 

function drawTriangle(ctx, sideLength) {
  var i = 0, direction = 1;

  ctx.save();
  ctx.strokeStyle = 'rgba(0, 0, 0, 1)';

  ctx.beginPath();

  ctx.moveTo(0, 0);
  for (; i < 3; i += 1) {
    ctx.rotate(Math.PI / -3);
    ctx.lineTo(direction * sideLength, 0);
    ctx.translate(direction * sideLength, 0);
    direction *= -1;
  }

  ctx.closePath();
  ctx.stroke();

  ctx.restore();
}

function drawCircle(ctx) {
  ctx.save();
  ctx.fillStyle = 'rgba(255, 0, 0, 1)';

  ctx.beginPath();
  ctx.arc(0, 0, 3, 0, 2 * Math.PI, true); 
  ctx.closePath();
  ctx.fill();

  ctx.restore();
}

function drawCircles(ctx, num, sideLength) {
  var stepLength = (sideLength * 3) / num, i = 0;

  ctx.save();
  for (; i < num; i += 1) {
    if ((stepLength * i) % sideLength === 0) {
      ctx.rotate(2 * Math.PI / 3);
    }

    drawCircle(ctx);
    ctx.translate(-stepLength, 0);
  }

  ctx.restore();
}

var
  canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  sideLength = 200;

if (ctx) {
  ctx.translate(50, 225);
  drawTriangle(ctx, sideLength);
  drawCircles(ctx, 14 * 3, sideLength);
}

демо: http://jsfiddle.net/ej2Kq/

1 голос
/ 09 февраля 2012

На картинке хорошо видно, что таким способом может быть организовано только определенное количество элементов.Число должно делиться на 3. Сначала - проверьте это предварительное условие.Затем разделите общее количество элементов на три группы и равномерно распределите каждую группу по каждой из границ.

0 голосов
/ 10 февраля 2012

Итак, на данный момент я придумал следующее:

http://jsfiddle.net/ZBVFL/

Он выполняет свою работу, но мне не нравится вручную добавлять последний круг.

...