Displaying transformed text on canvas D3-globe

I use D3 spelling projection to build a spinning globe that is painted on canvas. I add shapes to the globe using d3.geo.*, especially geo.circle.

I would also like to display text on the globe (also through the canvas) with a warning that the text should exist on the globe, with the correct transformation / curvature and cropping, like all other GeoJSON / TopoJSON functions that are displayed, However , you can only create forms created withd3.geo.path .

Is there a way to take some text (and a point, or perhaps a bounding box), and convert it through d3.geo.pathso that it can be drawn correctly on the globe? Here is photoshop (bad - the forms are not quite right) - an example of such an effect, which I after:

Example

+4
source share
1 answer

You will need to get the font as raw vectors, and then create the text as a set of points to go to d3.js so that it projects it onto the map, as was done with the contours of the country. The canvas is very limited in transformations that it can apply to elements such as text. Orthographic projection goes beyond its capabilities.

, . - , , inkscape , , . API d3.js, , , , .

+3

Source: https://habr.com/ru/post/1617157/


All Articles