根据 JS Raphael 库中的文本大小动态调整矩形或容器的大小答案

【问题标题】：Dynamically resize rectangle or container based on text size in JS Raphael library根据 JS Raphael 库中的文本大小动态调整矩形或容器的大小
【发布时间】：2012-10-12 02:42:50
【问题描述】：

这与之前的问题有关，令人惊讶的是，我在网上找不到示例。我正在尝试通过 ExpressionEngine 中的嵌入传递一个字符串，并且我希望我的矩形按钮根据通过嵌入传递的文本的大小水平扩展。在 Raphael 中，text 是否具有等效的 getWidth 方法？

有人可以根据以下内容提供示例代码吗：

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);

更新： 使用 getBBox() 方法，我能够获得一些绝对有用的相对值。但是，我得到的值并不是特别有用。

例如，我使用 120px x 45px 作为我之前的矩形的尺寸，它适合我的文本边框，但是使用 getBBox() 生成的新矩形的尺寸分别约为 27px x 12px。

我应该使用乘数吗？

UPDATE2：这显然是因为我还没有应用我的属性。但是，我仍然需要帮助来创建一个美观的文本框。

【问题讨论】：

经过更多搜索，我越来越怀疑是否有一种有效的方法可以在 Raphael 中对文本对象执行 getWidth。

标签： javascript resize raphael

【解决方案1】：

您需要使用.getBBox():

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

【讨论】：

感谢您的帮助，但请参阅上文（更新）
其实你知道的可能是我还没有添加属性吧！
我想我可以将偏移值与 getBBox() 方法结合使用
使用 contactText.attr({"text-anchor": "start"}) 绘制文本，因此 x,y 位于左上角而不是字符串的中间。