Координаты для точечных шрифтов в Javascript - PullRequest
Новая
       9

Координаты для точечных шрифтов в Javascript

4 голосов
/ 28 ноября 2011

Вдохновленный этим учебником , который

  • рисует слово "Google"
  • в виде множества ручных кругов / шариков (1)
  • на холсте html5,

в 1), например это 'o' 

new Ball(210, 81, 0, 0, red);
new Ball(197, 91, 0, 0, red);
new Ball(196, 103, 0, 0, red);
new Ball(200, 116, 0, 0, red);
new Ball(209, 127, 0, 0, red);
new Ball(223, 130, 0, 0, red);
new Ball(237, 127, 0, 0, red);
new Ball(244, 114, 0, 0, red);
new Ball(242, 98, 0, 0, red);
new Ball(237, 86, 0, 0, red);
new Ball(225, 81, 0, 0, red);

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

edit: Моя цель состоит в том, чтобы отобразить как минимум все обычные буквы (в обоих случаях) и цифры, что составляет минимум 62 символа.

продолжение: Люди, которые сталкиваются с этим вопросом, могут также захотеть взять этот один .

1 Ответ

1 голос
/ 28 ноября 2011

есть ли способ получить позиции из путей шрифтов?

Не в Canvas или с помощью команд холста.

Существуют различные программы, которые превращают шрифты вПути SVG.

Но вы не можете просто использовать точки пути SVG, потому что, например, кривая Безье описывается только 3 точками, но может составлять 1/4 круга.Из этих путей есть алгоритмы, которые разбивают пути на ряд точек (т. Е. «Q» станет 100 точками, описывающими круг и линию).

Вы должны быть в состоянии найти эти отдельные частидостаточно просто.

Самый простой способ - начать с пиксельного шрифта (, как этот ) и превратить каждый черный пиксель в точку.Конечно, вы не получите очень хорошее разрешение, но сравнительно легко.

...