Text 如何在famo.us中获取文本边界框

我试图绘制一条SVG贝塞尔曲线，该曲线从曲面中文本字符串的末尾开始。我可以将曲面的大小设置为[true，true]，这应该使大小等于文本边界框。但是如果我稍后尝试mySurface.size[0]以获得宽度，它将返回true！我需要得到一个边界框的宽度和高度的数字，以便计算我的贝塞尔曲线的终点！等效的DOM方法就是使用.getBBox函数。。在Famo.us中如何进行此操作？

这可能是因为曲面尚未渲染。这里有几个类似的问题，其中一个来自我：

您也可以尝试延迟或使用setTimeout或Engine.nextTick在下一个循环中检查大小

---

如果您找到了一个优雅的解决方案，请让我们知道，这在许多地方是一个大问题，使用著名的-必须进行多次highjinks，在初始设置中无法真正定位场景-您必须让场景渲染，然后进行调整…

您可以使用“getSize”函数并指定“true”以获得曲面的真实大小：

var realSize = surface.getSize(true);

---

@ljzerenHein，谢谢你的提示。。不幸的是，surface.getSizetrue返回null！ @dcsan，谢谢你的链接。我相信你可能是对的，但是与之相关的解决方案最终对我来说太复杂了

经过多次搜索、黑客攻击和试验，我决定采用以下方法： -]使用DOM获取文本字符串的未转换边界框 -]以SVG格式格式化文本字符串 -]使字符串不可见，将“填充”和“笔划”设置为“无” -]对我想要测量的所有字符串重用相同的div元素 -]有了未转换的边界框后，将著名的曲面大小设置为该值，然后应用修改器。 -]如果在应用所有变换后需要边界框，则获取曲面的总累积变换，并将其与原始未转换的边界框相乘

下面是创建DOM元素、插入SVG文本，然后获取边界框的代码：

//Do this part once, of creating a DOM element and adding it to the document
var el1 =  document.createElement("div");
document.body.appendChild(el1); //only need to append once -- just set innerHTML after

//now set the SVG text string -- from this point down can be repeated for multiple
// strings without removing or re-adding the element, nor fiddling with the DOM
var text1_1_1_SVG = '<svg>  <text x="0" y="0" style="font-family: Arial; font-size: 12;fill:none;stroke:none" id="svgText1">' + myFamousSurface.content + '</text> </svg>';
//note the id is inside the text element! Also the fill and stroke are null so nothing paints
el1.innerHTML = text1_1_1_SVG; 

//now get the element -- this seems to be what triggers the bounding box calc
var test = document.getElementById("svgText1"); //this is ID in the text element

//get the box, take the values out of it, and display them
var rect = test.getBoundingClientRect();
var str = "";
for (i in rect) { //a trick for getting all the attributes of the object
    str += i + " = " + rect[i] + "  ";
}
console.log("svgText1: " + str);

仅供参考，所有SVGTextElement方法似乎都可以在gotElem上调用。 SVGTextElement文档在这里：

@seanhalle

我很确定。getSizetrue返回null，因为该元素尚未添加到DOM中。请记住，famo.us与动画帧同步，并且不会立即更新DOM。直接访问DOM（也称为ping）是强烈反对的，因为这样会失去famo.us承诺的性能优势

我要做的是创建一个自定义视图，将曲面包裹在其中，并在其中实现渲染方法。在render方法中，使用getSizetrue获取大小。如果返回null， 您知道它还没有被提交到DOM

define('MyView', function (require, exports, module) {
    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    function MyView() {
        View.apply(this, arguments);
        this.surface = new Surface();
        this.add(this.surface);
    }
    MyView.prototype = Object.create(View.prototype);
    MyView.prototype.constructor = MyView;

    MyView.prototype.render = function() {
        var size = this.getSize(true);
        if (size) {
            if (!this.hasSize) {
                this.hasSize = true;
                console.log('now we have a size: ' + size);
            }
            this.surface.setContent('Size: ' + JSON.stringify(size));
        } else {
            console.log('no size yet');
        }
        return this._node.render();
    };

    module.exports = MyView;
});