Отображение преобразованного проекцией текста на глобусе D3 на основе холста

Я использую ортографическую проекцию D3 для создания вращающийся глобус, который рисуется на холсте. Я добавляю фигуры на глобус с помощью d3.geo.*, в частности geo.circle.

Я также хотел бы отображать текст на глобусе (тоже через холст) с оговоркой, что текст должен существовать на глобусе с правильным преобразованием/кривизной и отсечением, как и все другие GeoJSON/TopoJSON функции, которые визуализируются. Однако только фигуры, созданные via d3.geo.path можно нарисовать таким образом.

Есть ли способ взять некоторый текст (и точку или, возможно, ограничительную рамку) и преобразовать его с помощью d3.geo.path, чтобы его можно было правильно нарисовать на глобусе? Вот отфотошопленный (плохо — формы не совсем правильные) пример того эффекта, который мне нужен:

Пример


canvas d3.js map-projections
person Michelle Tilley    schedule 24.11.2015    source источник
comment
Связано: преобразование текста SVG в путь. Путь можно трансформировать так же, как вы трансформировали там континенты.   -  person Anko    schedule 24.11.2015

Ответы (1)


arrow_upward
3
arrow_downward

Вам нужно будет получить шрифт в виде необработанных векторов, а затем создать текст в виде набора точек, чтобы передать его в d3.js, чтобы он спроецировал его на карту, как это было сделано с очертаниями страны. Холст очень ограничен в преобразованиях, которые он может применять к таким элементам, как текст. Орфографическая проекция выходит за рамки его возможностей.

Таким образом, вам придется получить шрифт в векторном формате. Самый простой способ — использовать Photoshop, Illustrator, Inkscape или любой другой пакет, который может векторизовать шрифт для вас, а затем написать функцию для создания текста в виде пути из этого векторного шрифта. Я просмотрел документацию API d3.js, и, похоже, там нет ничего, что могло бы помочь со шрифтами.

person Blindman67    schedule 24.11.2015