在javascript中计算精确的字符字符串高度 [英] Calculate exact characterstring height in javascript

问题描述

我正在处理画布，但想不出任何解决方案，也无法在网上找到我的问题的答案.

I'm working with canvases and i can't think of any solution, or find answer on line to my problem.

我有一种字体，其中包含来自不同大小的符号字符 - 高度和宽度.

I have a font that contains symbolscharacters from varies sizes - heights and width.

我想从字体中绘制一些字符(符号)，并在符号的顶部底部绘制一些字符.问题是我无法找到一种方法来获得我正在绘制的字符的精确高度(以像素为单位)，这会导致中心符号与顶部向下符号之间出现不需要的空格(用于获取宽度一个字符串有函数 context.measureText(theText) ).

I want to draw some characters (Symbols) from the font and some on topdown of the symbol. The problem is that I can't figure out a way to have the exact height in pixels of the character that i'm drawing, and it's causes unwanted spaces between the center symbol to the one on topdown (for getting the width of a string there is the function context.measureText(theText) ).

例如.假设我希望X"成为我的中心符号.和 '-' 位于顶部.看起来像这样

for ex. lets say that i want 'X' to be my center symbol. and '-' to be on top. It's looks like this

-
x

但现在'X'和'-'之间有我不想要的空格.

but now there is space between the 'X' and the '-' that i don't want.

谁能帮我解决这个问题?

Can anyone help me with this ?

谢谢

推荐答案

宽度很简单:canvas 的上下文有一个内置的度量标准来测量文本宽度.

Width is easy: canvas's context has a built in metric for measuring text width.

// this will measure text width
context.font = '14pt Verdana';
var m=context.measureText(yourText);
var theWidth=m.width;

高度更难，因为 measureText 不计算高度.

Height is more difficult because measureText doesn't compute height.

你经常可以使用字体大小来近似高度——这就是我所做的.

You can often use the font size to approximate the height--that's what I do.

但如果您真的需要更高的准确性，这里有一个函数可以检查文本的像素以计算其高度:

But if you really need more accuracy here is a function that examines the text's pixels to calculate its height:

function measureTextHeight(fontSizeFace) {

    // create a temp canvas
    var width=1000;
    var height=60;
    var canvas=document.createElement("canvas");
    canvas.width=width;
    canvas.height=height;
    var ctx=canvas.getContext("2d");

    // Draw the entire a-z/A-Z alphabet in the canvas
    var text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    ctx.save();
    ctx.font=fontSizeFace;
    ctx.clearRect(0,0,width,height);
    ctx.fillText(text, 0, 40);
    ctx.restore();

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

    // Find the last line with a non-transparent 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-transparent 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;
    }

    // error condition if we get here
    return 0;
}

这篇关于在javascript中计算精确的字符字符串高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！