2

Есть много подобных фигур. введите сюда описание изображения

Я хочу рисовать их в случайном порядке. Но нужно чтобы они не пересекались. Как это можно реализовать? Фигуры в формате svg path, рисую на canvas.

2
  • Уточните что вам нужно - проверить пересекаются ли они, или замостить ими максимально плотно некую область?
    – Kromster
    23 авг 2017 в 5:51
  • @kromster мне нужно знать пересекаются ли они, если да то не рисовать фигуру в этом месте. Плотность не сильно большая, между фигурами должно быть расстояние.
    – TANKIST
    23 авг 2017 в 14:51

3 ответа 3

1

Можно взять крайние точки и сравнивать прямоугольники, в которые вписаны данные фигуры. Но такой способ не будет работать, если эти прямоугольники заведомо пересекаются.

введите сюда описание изображения

3
  • Почему вы считаете, что такой способ не будет работать, если эти прямоугольники заведомо пересекаются? Уочните.
    – Kromster
    23 авг 2017 в 19:51
  • @Kromster Потому что пересечение прямоугольников - это не 100% условие пересечения фигур (как показано на рисунке ранее). Имея такую вот ситуацию на практике, мы возвращаемся к тому, что из полезной информации у нас только сами фигуры и их координаты. Поправьте, если я не прав.
    – DogeDev
    23 авг 2017 в 21:07
  • Теперь понял что вы пытаетесь сказать. В ответе проблема с формулировкой. Предлагаемый вами способ будет работать, но будет давать ложно-положительные срабатывания. Это может быть вполне приемлимо для ТС. Ложно-положительные лучше, чем ложно-отрицательные )
    – Kromster
    24 авг 2017 в 4:24
1

Всем спасибо за ответы! Мне помогла статья Базовая теория столкновения объектов, спрайтов на Javascript Там же есть код для определения принадлежности точки полигону.

function pointInPoly(polyCords, pointX, pointY)
{
  var i, j, c = 0;

  for (i = 0, j = polyCords.length - 1; i < polyCords.length; j = i++)
  {

    if (((polyCords[i][1] > pointY) != (polyCords[j][1] > pointY)) && (pointX < (polyCords[j][0] - polyCords[i][0]) * (pointY - polyCords[i][1]) / (polyCords[j][1] - polyCords[i][1]) + polyCords[i][0]))
    {
      c = !c;
    }

  }

  return c;
}

Также нашел код для определения пересечений полигонов.

function crossLine(l1,l2) {
    var dx1 = l1[1][0] - l1[0][0],
        dy1 = l1[1][1] - l1[0][1],
        dx2 = l2[1][0] - l2[0][0],
        dy2 = l2[1][1] - l2[0][1],
        x = dy1 * dx2 - dy2 * dx1;

    if(!x, !dx2) {
        return false;
    }

    var y = l2[0][0] * l2[1][1] - l2[0][1] * l2[1][0];
    x = ((l1[0][0] * l1[1][1] - l1[0][1] * l1[1][0]) * dx2 - y * dx1) / x;
    y = (dy2 * x - y) / dx2;

    return ((l1[0][0] <= x && l1[1][0] >= x) || (l1[1][0] <= x && l1[0][0] >= x)) &&
           ((l2[0][0] <= x && l2[1][0] >= x) || (l2[1][0] <= x && l2[0][0] >= x));
}

Но он не понадобился, так как у меня фигуры состоят из большого количества полигонов.

0

Перед тем, как нарисовать новый объект, можно проверить если цвет пикселей в той области где вы хотите рисовать совпадает с цветом фона, то можно рисовать, если нет то перемешаем эту самую область

2
  • или сохранять добавленые элементы, т.е сохранять координаты центра + радиус. когда добавляешь новый то проверяешь, не рисуешь ли ты на какой нибудь фигуре, радиус можно посчитать вписывая свою фигуру в окружность. тогда расстояние между фигурами будет равна найменьшему радиусу фигур.
    – user256707
    23 авг 2017 в 17:08
  • Используйте кнопку "править" под текстом ответа ;-)
    – Kromster
    23 авг 2017 в 19:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.