Question

我正在使用fabric.js。我想得到矩形的尺寸（是“边界框”正确的术语？），它确切地包含文本（由下面的红框表示）。即使我将填充更改为0，默认的fabric.js框也有填充。

我尝试从结构画布中获取上下文，然后调用.measureText（），但它没有提供我需要的边界框的完整信息。

编辑：

似乎IText对象有几个组件：容器，选择区域和文本本身。在下图中，IText框是浅蓝色线。选择区域是浅蓝色填充。 红框是我需要的 .... 完全包含文本本身的区域（在这样的矩形之间甚至不是1像素和文本中最极端的部分）。方法getBoundingRectHeight和getBoundingRectWidth（我不相信，不推荐使用getBoundingRect代替）返回外部IText容器框的高度/宽度（浅蓝色线条）。

注意：这是一个8 px填充框（蓝线和蓝色填充之间的区域）。即使我填充0，功能仍然不能满足我的需要。

Answer 1

您是否尝试过在每个结构对象上使用的getBoundingRectHeight()和getBoundingRectWidth()方法？

Answer 2

我不知道用于执行此操作的性能或资源。但它确实有效。感谢@ Prestaul的post让我开始。这就是我想出的：

function getBoundingBox(ctx, left, top, width, height) {
    var ret = {};

    // Get the pixel data from the canvas
    var data = ctx.getImageData(left, top, width, height).data;
    console.log(data);
    var first = false; 
    var last = false;
    var right = false;
    var left = false;
    var r = height;
    var w = 0;
    var c = 0;
    var d = 0;

    // 1. get bottom
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                console.log('last', r);
                last = r+1;
                ret.bottom = r+1;
                break;
            }
        }
    }

    // 2. get top
    r = 0;
    var checks = [];
    while(!first && r < last) {

        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                console.log('first', r);
                first = r-1;
                ret.top = r-1;
                ret.height = last - first - 1;
                break;
            }
        }
        r++;
    }

    // 3. get right
    c = width;
    while(!right && c) {
        c--;
        for(r = 0; r < height; r++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                console.log('last', r);
                right = c+1;
                ret.right = c+1;
                break;
            }
        }
    }

    // 4. get left
    c = 0;
    while(!left && c < right) {

        for(r = 0; r < height; r++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                console.log('left', c-1);
                left = c;
                ret.left = c;
                ret.width = right - left - 1;
                break;
            }
        }
        c++;

        // If we've got it then return the height
        if(left) {
            return ret;    
        }
    }

    // We screwed something up...  What do you expect from free code?
    return false;
}

这是一个jsfiddle演示：http://jsfiddle.net/spencerw/j41jx0e2/

Answer 3

以下摘自W3C的“HTML Canvas 2D Context，编辑草案2014年11月13日草案”。这是关于绘图文本的章节中的一个注释：

使用fillText（）和strokeText（）渲染的字形可以溢出由字体大小（em平方大小）和返回的宽度给出的框通过measureText（）（文本宽度）。此版本的规范没有提供获得边界框尺寸的方法文本。如果要呈现和删除文本，则需要注意采取替换剪裁的画布的整个区域区域覆盖，而不仅仅是由em方形高度和测量文字宽度。

目前，您似乎无法根据需要确定javascript的边界框。您只能依赖重绘整个画布/剪裁区域。

Fabric.js：获取文本边界框的宽度和高度

3 个答案: