Question

This is related to a previous question, and surprisingly, I couldn’t find an example online. I am trying to pass a string through an embed in ExpressionEngine, and I would like for my rectangle button to expand horizontally based on the size of the text that gets passed through the embed. In Raphael, does text have the equivalent of a getWidth method?

Could someone please provide example code based on the following:

var contactTextPara = "{embed:quote}";
var rectHeight = 45;
var rectWidth;
// Create an object group
p.setStart();

var contactText = p.text(11,22,contactTextPara);
var contactRect= p.rect(0, 0, rectWidth, rectHeight);

UPDATE: Using the getBBox() method, I am able to achieve some relative which values which is definitely helpful. However, the values that I get are not particularly helpful.

For example, I used 120px x 45px as the dimensions of my previous rectangle, which fit the border of my text, but the new rectangle generated using getBBox() has dimensions of are about 27px x 12px respectively.

Am I supposed to use a multiplier?

UPDATE2: That was clearly due to the fact that I had not yet applied my attributes. However, I still need help creating an aesthetically pleasing text box.

Answer 1

You need to use the .getBBox():

var contactText = p.text(11,22,contactTextPara);
var dimensions = contactText.getBBox();
var contactRect= p.rect(0, 0, dimensions.width, dimensions.height);