1

次のコードを使用して、CSS に含めたフォントの高さを測定する際に問題が発生しています。

    measureFontHeight3: function(font)
    {
        var left = 0;
        var top = 0;
        var height = 50;
        var width = 50;

        // Draw the text in the specified area
        var canvas = ig.$new('canvas');
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext('2d');
        ctx.font = font;
        ctx.textBaseline = 'top';
        ctx.fillText('gM', 0,0);

        // 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) 
                {
                    var result = last - first;
                    console.log("3: " +result);
                    return result;
                }
        }

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

システムに既にインストールされているフォントを測定する場合、関数は非常に正確ですが、CSS ファイルに含まれているフォントを測定しようとすると、測定が機能しません。つまり、間違って測定されます。

新しいキャンバスが新しいフォントを「見る」ことができないためですか、それとも何か問題がありますか?

4

1 に答える 1

1

フォントが完全にロードされる前にフォントを測定したいからでしょうか?

私の例では、うまく機能しているようです:フォントの例

于 2012-08-02T08:16:12.783 に答える