Как я могу получить кучу квадратов, чтобы выглядеть как граница Хорватии?

Question

Я решил использовать SVG для создания квадратов и изображений, которые мне нужны. SVG гибки, и это должно работать со мной.

Я не могу понять, как я могу генерировать квадраты, чтобы соответствовать границе Хорватии. Конечный результат, который я хотел бы получить, можно увидеть (см. Изображение ниже).

ИЗОБРАЖЕНИЕ:

Довольно просто генерировать квадраты в некоторой прямоугольной форме angular. Поскольку граница Хорватии не является прямой angular, единственное, что я имею в виду, это сделать это вручную, но это не гибко. Что если я захочу создать квадраты большего или меньшего размера, просто чтобы проверить это и подогнать их под границы.

Answer 1

Обычно ошибочно создавать такие низкоуровневые графические примитивы. Работа с волнистыми или вложенными границами и краевыми условиями является притягивающим ошибки кодом.

Я бы предложил создать маленький HTML canvas, на котором на нем будет нарисована Хорватия с path примитивами и fill, затем читая его содержимое с getImageData. Каждый полностью черный пиксель соответствует квадрату, который вы хотите нарисовать. (Размер холста, чтобы гарантировать это.)

(Или, если вы просто хотите эстетику c, используйте SVG-шаблон заливки. Это было бы меньше работы.)