javascript - Fabric .js : Get text bounding box width and height

Question

我正在使用 fabric.js。我想获得恰好包含文本(由下面的红色框表示)的矩形的尺寸(“边界框”是正确的术语吗？)。即使我将填充更改为 0，默认的 fabric.js 框也有填充。

我尝试从织物 Canvas 获取上下文，然后调用 .measureText()，但它没有提供边界框所需的完整信息。

编辑:

IText 对象似乎有几个组成部分:容器、选择区域和文本本身。在下图中，IText 框是淡蓝色的线。选择区域是浅蓝色填充。 红色框是我需要的....它是恰好包含文本本身的区域(甚至不到 1 个像素这样的矩形之间以及文本中最极端的部分)。 getBoundingRectHeight 和 getBoundingRectWidth 方法(我相信这两个方法已被弃用并被 getBoundingRect 取代)返回外部 IText 容器框(浅蓝线)的高度/宽度。

注意:这是一个 8 像素的填充框(蓝线和蓝色填充之间的区域)。即使我将填充设置为 0，这些函数仍然无法满足我的需求。

Answer 1

我不知道用于执行此操作的性能或资源。但它确实有效。感谢@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/