Fabric.js：获取文本边界框的宽度和高度 [英] Fabric.js: Get text bounding box width and height

问题描述

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

I'm using fabric.js. I would like to get the dimensions of the rectangle (is "bounding box" the correct term?) that exactly contains the text (represented by the red box below). The default fabric.js box has padding even if I change padding to 0.

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

I tried to get the context from the fabric canvas and then call .measureText() but it didn't give the full information I needed for a bounding box.

编辑：

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

It seems there are several components of the IText object: the container, the selection area, and the text itself. In the image below, the IText box is the light blue line. The selection area is the light blue fill. The red box is what I need....it's the area that exactly contains the text itself (not even 1 pixel between such a rectangle and the most extreme parts of the text). The methods getBoundingRectHeight and getBoundingRectWidth (both deprecated and replaced by getBoundingRect I believe) return the height/width of the outer IText container box (light blue line).

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

Note: this is an 8 px padded box (the area between the blue line and blue fill). Even if I make padding 0, the functions still don't give me what I need.

推荐答案

我不知道用于执行此操作的性能或资源。但它确实有效。感谢@ Prestaul的发布以帮助我入门。这就是我想出的：

I have no idea about the performance or resources that are used to do this. But it does work. Thanks to @Prestaul's post for a getting me started. This is what I came up with:

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/

And here's a jsfiddle demo: http://jsfiddle.net/spencerw/j41jx0e2/

这篇关于Fabric.js：获取文本边界框的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！