Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add text to a raphael js element

I want to add text to a element in raphael js, I have added text with

r.text(30, 20, "ellipse").attr({fill: color});

But how to add this text to

ec = r.ellipse(190, 100, 30, 20);

regards

like image 997
pahnin Avatar asked Nov 15 '11 17:11

pahnin


2 Answers

Raphael does not have child/parent relationship between elements, so you will set same position for them e.g.

ec = paper.ellipse(190, 100, 30, 20);
paper.text(190, 100, "ellipse").attr({fill: '#ff0000'});

So if you want a ellipse with text, create your own JavaScript object which handles positioning of both.

or alternate way is to group elements via set e.g.

var eltext = paper.set();
el = paper.ellipse(0, 0, 30, 20);
text = paper.text(0, 0, "ellipse").attr({fill: '#ff0000'})
eltext.push(el);
eltext.push(text);
eltext.translate(100,100)
like image 126
Anurag Uniyal Avatar answered Oct 05 '22 12:10

Anurag Uniyal


You can easly add text to youR elements creating a text Raphael element and add as attribute text into your element.

 elText = r.text(.....);
 yourEl.attr({text:elText});
like image 39
Donovant Avatar answered Oct 05 '22 10:10

Donovant