AstroDraw / AstroChart

A free and open-source TypeScript library for generating SVG charts to display planets in astrology.
https://astrodraw.github.io
MIT License
213 stars 55 forks source link

Introduce text in Chart #4

Open cptolemy opened 3 years ago

cptolemy commented 3 years ago

Good morning

I would like to add to the chart some text, at a particular coordinate. Can someone please help me with the code?

Suppose I want to place at the top (x=10, y=10) the text "Astro Chart", in Times Roman font, size 15pt. I made some attempts, but they all went wrong... and something tells me it's probably easy.

I apreciate the help.

Best regards

CPtolemy

afucher commented 3 years ago

Hey @cptolemy , to do this you will need to get the SVG element in the document, and then append child node to it. Do you want to share some code that you tried and did not work?

cptolemy commented 3 years ago

Good afternoon afucher

Again, I am very sorry for the late reply.

I was able to find a solution, since there is a text function. So, in the function drawCircles I inserted something like this:

var outext; var user_text = astrology.SHOW_USER_TEXT; //a variant I define globally in the code var outext = this.paper.text(user_text,x ,y , size_value, color_value); wrapper.appendChild( outext );

I tried to make a function, at the time, named drawText, but it did not work out when trying to define the wrapper (I get an error on that one) or the universe:

astrology.Radix.prototype.drawText = function drawText(user_text, x, y, size_value,c olor_value){ var universe = this.universe;
var wrapper = astrology.utils.getEmptyWrapper( universe, astrology.ID_CHART + "-" + astrology.ID_RADIX + "-" + astrology.ID_CIRCLES); var outext; var user_text = user_text; var outext = this.paper.text(user_text,x ,y , size_value, color_value); wrapper.appendChild( outext ); }; ...

How do I call it from the Html/PHP page, from the Radix? I know it's simple, but I lost myself in the logic...

Regards,

CPtolemy