C# 使用 GDI+ 給圖片添加文字,并使文字自適應(yīng)矩形區(qū)域

PS:這篇文章是 GDI+ 總結(jié)系列的第二篇,如果對(duì) GDI+ 的基礎(chǔ)使用不熟悉的朋友可以先看第一篇文章《C# 使用 GDI+ 畫(huà)圖》。


需求

需求是要做一個(gè)編輯文字的頁(yè)面。用戶(hù)在網(wǎng)頁(yè)端寫(xiě)文字,文字區(qū)域是個(gè)矩形框,用戶(hù)可以通過(guò)下方的拖動(dòng)條調(diào)節(jié)文字大小。
如下圖:

1.png

提交數(shù)據(jù)的時(shí)候前端傳文字區(qū)域的左上角和右下角定位給后臺(tái)。因?yàn)榍岸说淖煮w大小單位與后端沒(méi)什么關(guān)系,所以不能直接傳字體大小,也就是后端要根據(jù)矩形區(qū)域以及文字內(nèi)容來(lái)自己推算用什么樣的字體大小合適。

簡(jiǎn)單說(shuō)就是知道文字的矩形區(qū)域,以及文字內(nèi)容,要讓文字內(nèi)容根據(jù)矩形區(qū)域大小調(diào)整到適合的字體大小能比較合適地填滿(mǎn)這個(gè)區(qū)域。


分析&思路

Graphics 類(lèi)有個(gè) MeasureString 方法,可以用來(lái)計(jì)算以當(dāng)前字體寫(xiě)出來(lái)的文字會(huì)占據(jù)多少像素。
如下:

//
// 摘要:
//     測(cè)量用指定的 System.Drawing.Font 繪制的指定字符串。
//
// 參數(shù):
//   text:
//     要測(cè)量的字符串。
//
//   font:
//     System.Drawing.Font,它定義字符串的文本格式。
//
// 返回結(jié)果:
//     此方法返回 System.Drawing.SizeF 結(jié)構(gòu),該結(jié)構(gòu)表示 text 參數(shù)指定的、使用 font 參數(shù)繪制的字符串的大小,單位由 System.Drawing.Graphics.PageUnit
//     屬性指定。
//
// 異常:
//   T:System.ArgumentException:
//     font 為 null。
public SizeF MeasureString(string text, Font font);

這個(gè)方法返回的 SizeF 包含 WidthHeight 屬性,讀取這兩個(gè)屬性可以獲取到文字內(nèi)容所占的寬高(以像素為單位)。

//
// 摘要:
//     獲取或設(shè)置此 System.Drawing.SizeF 結(jié)構(gòu)的水平分量。
//
// 返回結(jié)果:
//     此 System.Drawing.SizeF 結(jié)構(gòu)的水平分量,通常以像素為單位進(jìn)行度量。
public float Width { get; set; }

// 摘要:
//     獲取或設(shè)置此 System.Drawing.SizeF 結(jié)構(gòu)的垂直分量。
//
// 返回結(jié)果:
//     此 System.Drawing.SizeF 結(jié)構(gòu)的垂直分量,通常以像素為單位進(jìn)行度量。
public float Height { get; set; }

于是我們可以先根據(jù)前端傳過(guò)來(lái)的文字左上角與右下角定位,算出文字的矩形區(qū)域,然后估計(jì)一個(gè)字體大小,再用 MeasureString 方法計(jì)算出估算的文字所占區(qū)域,比較和實(shí)際的文字區(qū)域大小,大了則縮小字體,小了則增大字體。這樣即可大約找出合適的文字大小。


具體實(shí)現(xiàn)

  • 添加文字方法
/// <summary>
/// 圖片添加文字,文字大小自適應(yīng)
/// </summary>
/// <param name="imgPath">圖片路徑</param>
/// <param name="locationLeftTop">左上角定位(x1,y1)</param>
/// <param name="locationRightBottom">右下角定位(x2,y2)</param>
/// <param name="text">文字內(nèi)容</param>
/// <param name="fontName">字體名稱(chēng)</param>
/// <returns>添加文字后的Bitmap對(duì)象</returns>
public static Bitmap AddText(string imgPath, string locationLeftTop, string locationRightBottom, string text, string fontName = "華文行楷")
{
    Image img = Image.FromFile(imgPath);

    int width = img.Width;
    int height = img.Height;
    Bitmap bmp = new Bitmap(width, height);
    Graphics graph = Graphics.FromImage(bmp);

    // 計(jì)算文字區(qū)域
    // 左上角
    string[] location = locationLeftTop.Split(',');
    float x1 = float.Parse(location[0]);
    float y1 = float.Parse(location[1]);
    // 右下角
    location = locationRightBottom.Split(',');
    float x2 = float.Parse(location[0]);
    float y2 = float.Parse(location[1]);
    // 區(qū)域?qū)捀?    float fontWidth = x2 - x1;
    float fontHeight = y2 - y1;

    float fontSize = fontHeight;  // 初次估計(jì)先用文字區(qū)域高度作為文字字體大小,后面再做調(diào)整,單位為px

    Font font = new Font(fontName, fontSize, GraphicsUnit.Pixel);
    SizeF sf = graph.MeasureString(text, font);

    int times = 0;

    // 調(diào)整字體大小以適應(yīng)文字區(qū)域
    if (sf.Width > fontWidth)
    {
        while (sf.Width > fontWidth)
        {
            fontSize -= 0.1f;
            font = new Font(fontName, fontSize, GraphicsUnit.Pixel);
            sf = graph.MeasureString(text, font);

            times++;
        }

        Console.WriteLine("一開(kāi)始估計(jì)大了,最終字體大小為{0},循環(huán)了{(lán)1}次", font.ToString(), times);
    }
    else if (sf.Width < fontWidth)
    {
        while (sf.Width < fontWidth)
        {
            fontSize += 0.1f;
            font = new Font(fontName, fontSize, GraphicsUnit.Pixel);
            sf = graph.MeasureString(text, font);

            times++;
        }

        Console.WriteLine("一開(kāi)始估計(jì)小了,最終字體大小為{0},循環(huán)了{(lán)1}次", font.ToString(), times);
    }

    // 最終的得出的字體所占區(qū)域一般不會(huì)剛好等于實(shí)際區(qū)域
    // 所以根據(jù)兩個(gè)區(qū)域的相差之處再把文字開(kāi)始位置(左上角定位)稍微調(diào)整一下
    x1 += (fontWidth - sf.Width) / 2;
    y1 += (fontHeight - sf.Height) / 2;

    graph.DrawImage(img, 0, 0, width, height);
    graph.DrawString(text, font, new SolidBrush(Color.Black), x1, y1);

    graph.Dispose();
    img.Dispose();

    return bmp;
}
  • 測(cè)試調(diào)用
private static void Main(string[] args)
{
    try
    {
        DrawingEntity drawing = new DrawingEntity();

        Console.WriteLine("Start drawing ...");
        System.Drawing.Bitmap bmp = drawing.AddText(@"D:\test\39585148.png", "177.75,63.84", "674.73, 141.6", "大海啊,全是浪");
        bmp.Save(@"D:\test\output.png");
        bmp.Dispose();
        Console.WriteLine("Done!");
    }
    catch (System.Exception ex)
    {
        Console.WriteLine("出錯(cuò)了?。n" + ex.ToString());
    }
    finally
    {
        System.Console.WriteLine("\nPress any key to continue ...");
        System.Console.ReadKey();
    }
}

最終效果:


2.png

系列其他文章:
C# 使用 GDI+ 畫(huà)圖
C# 使用 GDI+ 實(shí)現(xiàn)添加中心旋轉(zhuǎn)(任意角度)的文字

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容