首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML画布上找到文本的高度?

如何在HTML画布上找到文本的高度?
EN

Stack Overflow用户
提问于 2009-07-15 23:06:07
回答 21查看 132.1K关注 0票数 164

规范有一个文本(context.measureText)函数,它将告诉您打印文本需要多大宽度,但我找不到一种方法来确定它有多高。我知道它是基于字体的,但我不知道如何将字体字符串转换为文本高度。

EN

回答 21

Stack Overflow用户

发布于 2012-11-10 09:36:44

通过检查大写字母M的长度,可以得到与垂直高度非常接近的高度。

代码语言:javascript
复制
ctx.font = 'bold 10px Arial';

lineHeight = ctx.measureText('M').width;
票数 52
EN

Stack Overflow用户

发布于 2009-07-16 04:20:06

画布规范没有给我们一种测量绳子高度的方法。但是,您可以以像素为单位设置文本的大小,并且通常可以相对容易地计算出垂直边界。

如果您需要更精确的内容,那么您可以将文本放到画布上,然后获取像素数据,并计算出垂直使用了多少像素。这将是相对简单的,但效率不是很高。你可以这样做(它可以工作,但是在你的画布上绘制一些你想要删除的文本):

代码语言:javascript
复制
function measureTextHeight(ctx, left, top, width, height) {

    // Draw the text in the specified area
    ctx.save();
    ctx.translate(left, top + Math.round(height * 0.8));
    ctx.mozDrawText('gM'); // This seems like tall text...  Doesn't it?
    ctx.restore();

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

    // Find the last line with a non-white pixel
    while(!last && r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                last = r;
                break;
            }
        }
    }

    // Find the first line with a non-white pixel
    while(r) {
        r--;
        for(c = 0; c < width; c++) {
            if(data[r * width * 4 + c * 4 + 3]) {
                first = r;
                break;
            }
        }

        // If we've got it then return the height
        if(first != r) return last - first;
    }

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

// Set the font
context.mozTextStyle = '32px Arial';

// Specify a context and a rect that is safe to draw in when calling measureTextHeight
var height = measureTextHeight(context, 0, 0, 50, 50);
console.log(height);

对于Bespin,他们通过测量小写‘m’的宽度来伪造高度。我不知道这是如何使用的,我也不推荐使用这种方法。下面是相关的Bespin方法:

代码语言:javascript
复制
var fixCanvas = function(ctx) {
    // upgrade Firefox 3.0.x text rendering to HTML 5 standard
    if (!ctx.fillText && ctx.mozDrawText) {
        ctx.fillText = function(textToDraw, x, y, maxWidth) {
            ctx.translate(x, y);
            ctx.mozTextStyle = ctx.font;
            ctx.mozDrawText(textToDraw);
            ctx.translate(-x, -y);
        }
    }

    if (!ctx.measureText && ctx.mozMeasureText) {
        ctx.measureText = function(text) {
            ctx.mozTextStyle = ctx.font;
            var width = ctx.mozMeasureText(text);
            return { width: width };
        }
    }

    if (ctx.measureText && !ctx.html5MeasureText) {
        ctx.html5MeasureText = ctx.measureText;
        ctx.measureText = function(text) {
            var textMetrics = ctx.html5MeasureText(text);

            // fake it 'til you make it
            textMetrics.ascent = ctx.html5MeasureText("m").width;

            return textMetrics;
        }
    }

    // for other browsers
    if (!ctx.fillText) {
        ctx.fillText = function() {}
    }

    if (!ctx.measureText) {
        ctx.measureText = function() { return 10; }
    }
};
票数 39
EN

Stack Overflow用户

发布于 2012-05-08 22:46:43

正如JJ Stiff建议的那样,您可以将文本添加到范围中,然后测量该范围的offsetHeight。

代码语言:javascript
复制
var d = document.createElement("span");
d.font = "20px arial";
d.textContent = "Hello world!";
document.body.appendChild(d);
var emHeight = d.offsetHeight;
document.body.removeChild(d);

HTML5Rocks所示

票数 11
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1134586

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档