如何绘制与轮廓文本到影像？ [英] How to Drawing Text with Outline onto Images?

问题描述

我一直在寻找，寻找与绘图大纲文本到影像？

下面我的代码

 私有静态无效tulisnamafile（字符串的ImagePath，串textnya）
 {
 
图像的图像= Image.FromStream（新的MemoryStream（File.ReadAllBytes（的ImagePath）））; 
位图newImage =新位图（640，380）;使用
（图形G = Graphics.FromImage（newImage））
 {
 //绘制基本映像
 g.DrawImageUnscaled（图像，0，0）; 
 //静态这里
 SolidBrush刷牙=新SolidBrush（Color.White）; 
字体的字体=新字体（（Comic Sans字体MS），20.0f）; 
 INT napoint = newImage.Height  -  90; 
 INT napointa = image.Width  -  200; 
的FontFamily FF =新的FontFamily（宋体）; 
 fontSize的INT = 24; 
字体F =新的字体（FF，fontSize的，FontStyle.Regular）; 
的StringFormat SF =新的StringFormat（）; 
矩形displayRectangle =新的Rectangle（新点（5，napoint），新的大小（newImage.Width  -  1，newImage.Height  -  1））; 
 g.DrawEllipse（Pens.Magenta，新的Rectangle（0，0，1，1））; 
 GraphicsPath的GP =新的GraphicsPath（）; 
 gp.AddString（textnya，FF，（int）的FontStyle.Bold，fontSize的1 + 4，新点（0,0），SF）; 
 g.FillPath（Brushes.White，GP）; 
 g.DrawPath（Pens.Black，GP）; 
 
 g.Flush（FlushIntention.Sync）; 
 g.Dispose（）; 
} 
 image.Dispose（）; 
字符串文件名=ab.jpg; 
路径字符串= Path.Combine（AppDomain.CurrentDomain.BaseDirectory，文件名）; 
 MessageBox.Show（路径）; 
 newImage.Save（路径，System.Drawing.Imaging.ImageFormat.Jpeg）; 
 newImage.Dispose（）; 
} 
  

及其触发

 私人无效button3_Click（对象发件人，EventArgs五）
 {
 
串imagename =C：\\Documents和Settings\ \admin\\My Documents\\Visual工作室2008\\Projects\\template\\template\\bin\\Debug\\bg.jpg 
 tulisnamafile（imagenameSlimPort®SP1002;移动设备连接到任何大屏幕高速微型USB。）; 
 
} 
  

检查代码的结果：

这样的结果搞乱，解开与白色

这我想要的东西，并与包装

我发现的 CodeProject上但不是运气，它使用C ++。基于有人在Neowin网站并尝试这种的一位太 ..

但仍然没有运气

更新：

下面我的工作代码，谁也许需要根据......从Abdias软件的代码（检查答案），我做小的变化（有这些代码的一些错误）。

 私有静态无效tulisnamafile（字符串的ImagePath，串textnya）
 {
 
 fontSize的浮动= 22; 
 
图像的图像= Image.FromStream（新的MemoryStream（File.ReadAllBytes（的ImagePath）））; 
 //这个演示
 BMP位=（位图）Image.FromFile（的ImagePath）一些测试图像; 
图形G = Graphics.FromImage（BMP）; 
 
 //这将集中在图像
的StringFormat底部SF =新的StringFormat使我们的文本（）; 
 sf.Alignment = StringAlignment.Center; 
 sf.LineAlignment = StringAlignment.Far; 
 
 //定义的字体使用。 
字体F =新的字体（影响，fontSize的，FontStyle.Bold，GraphicsUnit.Pixel）; 
 
 //笔轮廓 - 设置宽度参数
笔P =新朋（ColorTranslator.FromHtml（＃77090C），8）; 
 p.LineJoin = LineJoin.Round; //防止在路径
 
尖峰//这使得每一行文本
矩形FR =新的Rectangle（0，bmp.Height梯度重复 -  f.Height，BMP。宽度，f.Height）; 
一个LinearGradientBrush B =新一个LinearGradientBrush（FR，
 ColorTranslator.FromHtml（＃FF6493）
 ColorTranslator.FromHtml（＃D00F14）
 90）; 
 
 //这将是用于绘制和自动换行文本的矩形。 
 //基本上=图像尺寸
矩形R =新的Rectangle（0，0，bmp.Width，bmp.Height）; 
 
 GraphicsPath的GP =新的GraphicsPath（）; 
 
 //看妈妈！无预包装！ 
 gp.AddString（textnya，f.FontFamily，（INT）FontStyle.Bold，fontSize的，R，SF）; 
 
 //这些影响行，如在路径。 Textrenderhint不影响
 //文本中的路径，因为它被转化成..well，路径。 
 g.Smoothi​​ngMode = Smoothi​​ngMode.AntiAlias​​; 
 g.PixelOffsetMode = PixelOffsetMode.HighQuality; 
 
 // TODO：影子 - > g.translate，fillpath一次，除去翻译
 g.DrawPath（P，GP）; 
 g.FillPath（B，GP）; 
 
 //清理
 gp.Dispose（）; 
 b.Dispose（）; 
 b.Dispose（）; 
 f.Dispose（）; 
 sf.Dispose（）; 
 g.Dispose（）; 
字符串文件名=ab.jpg; 
路径字符串= Path.Combine（AppDomain.CurrentDomain.BaseDirectory，文件名）; 
 bmp.Save（路径，System.Drawing.Imaging.ImageFormat.Jpeg）; 
 bmp.Dispose（）; 
} 
  

解决方案

只是为了总结：

定义 GraphicPath ，然后用 DrawPath 绘制概述文字版本， FillPath 绘制填充的版本。

有关的女人，第二个第二图像（填写）版本是首先绘制在小胶印机。

有关渐变使用一个LinearGradientBrush 为刷子。轮廓的厚度由笔的厚度来决定。

有关包装定义的StringFormat ，并使用长方形来定义你想要的文字是在该地区。

为中心，您可以定义的矩形有文字宽度相同的图像，然后设置 strformat.Alignment 到中心。

更新：复制第二图像中的文字，你可以使用此代码：

 浮fontSize的= 52; 
 
 //这个演示
 BMP位图的一些测试图像=（位图）Image.FromFile（Stest.jpg放在）; 
图形G = Graphics.FromImage（BMP）; 
 
 //这将集中在图像
的StringFormat底部SF =新的StringFormat使我们的文本（）; 
 sf.Alignment = StringAlignment.Center; 
 sf.LineAlignment = StringAlignment.Far; 
 
 //定义的字体使用。 
字体F =新的字体（影响，fontSize的，FontStyle.Bold，GraphicsUnit.Pixel）; 
 
 //笔轮廓 - 设置宽度参数
笔P =新朋（ColorTranslator.FromHtml（＃77090C），8）; 
 p.LineJoin = LineJoin.Round; //防止在路径
 
尖峰//这使得每一行文本
矩形FR =新的Rectangle（0，bmp.Height梯度重复 -  f.Height，BMP。宽度，f.Height）; 
一个LinearGradientBrush B =新一个LinearGradientBrush（FR，
 ColorTranslator.FromHtml（＃FF6493）
 ColorTranslator.FromHtml（＃D00F14）
 90）; 
 
 //这将是用于绘制和自动换行文本的矩形。 
 //基本上=图像尺寸
矩形R =新的Rectangle（0，0，bmp.Width，bmp.Height）; 
 
 GraphicsPath的GP =新的GraphicsPath（）; 
 
 //看妈妈！无预包装！ 
 gp.AddString（演示堆栈溢出，
 f.FontFamily，（INT）f.Style，fontSize的，R，SF）; 
 
 //这些影响行，如在路径。 Textrenderhint不影响
 //文本中的路径，因为它被转化成..well，路径。 
 g.Smoothi​​ngMode = Smoothi​​ngMode.AntiAlias​​; 
 g.PixelOffsetMode = PixelOffsetMode.HighQuality; 
 
 // TODO：影子 - > g.translate，fillpath一次，除去翻译
 g.DrawPath（P，GP）; 
 g.FillPath（B，GP）; 
 
 //清理
 gp.Dispose（）; 
 b.Dispose（）; 
 b.Dispose（）; 
 f.Dispose（）; 
 sf.Dispose（）; 
 g.Dispose（）; 
 
 bmp.Save（Stest_result.jpg，System.Drawing.Imaging.ImageFormat.Jpeg）; 
 bmp.Dispose（）; 
  

这会产生这样的结果：

要产生额外的影子仅仅翻译先按g 首先，画填，然后取出翻译。

的

FromHtml 在这里被用作我从你的形象挑颜色，是懒惰转换。只需使用 Col​​or.FromARGB（）或固定的颜色 - 只要你想

VB版：

 昏暗fontSize的单= 52 
 
昏暗的BMP位图作为= Bitmap.FromFile（C：\test .JPG）
昏暗摹作为图形= Graphics.FromImage（BMP）
 
尺寸SF作为新的StringFormat（StringFormatFlags.NoClip）
 sf.Alignment = StringAlignment.Center 
 sf.LineAlignment = StringAlignment.Far 
 
尺寸f，按新的字体（影响，fontSize的，FontStyle.Bold，GraphicsUnit.Pixel）
 
昏暗数p作为新笔（ColorTranslator.FromHtml（＃77090C），4）
 p.LineJoin = LineJoin.Round 
 
位矩形的字体重复梯度为每行
昏暗FR作为新矩形（0，bmp.Height  -  f.Height，bmp.Width，f.Height）
尺寸b以新建一个LinearGradientBrush（FR，
 ColorTranslator.FromHtml（＃FF6493），
 ColorTranslator.FromHtml（＃D00F14），
 90）
 
昏暗 -  [R作为新的Rectangle（0，0，bmp.Width，bmp.Height）
昏暗GP作为新GraphicsPath的
 
 gp.AddString（演示堆栈溢出，
 f.FontFamily，
 f.Style，
 fontSize的，
R，
 SF）
 
 g.Smoothi​​ngMode = Smoothi​​ngMode.AntiAlias​​ 
 g.PixelOffsetMode = PixelOffsetMode.HighQuality 
 
 g.DrawPath（p，GP）
摹.FillPath（b，GP）
 
 gp.Dispose（）'路径
 b.Dispose（）'b 
 b.Dispose（）'p 
 F。的Dispose（）'字型
 sf.Dispose（）'的StringFormat 
 g.Dispose（）'G 
 
 bmp.Save（C：\test_result.jpg，成像.ImageFormat.Jpeg）
 bmp.Dispose（）
  

I have been searching and looking for Drawing text with outline onto images?

Here my code

    private static void tulisnamafile(string imagepath, string textnya)
    {

        Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
        Bitmap newImage = new Bitmap(640, 380);
        using (Graphics g = Graphics.FromImage(newImage))
        {
            // Draw base image
            g.DrawImageUnscaled(image, 0, 0);
            //Static is HERE
            SolidBrush brushing = new SolidBrush(Color.White);
            Font font = new Font(("Comic Sans MS"), 20.0f);
            int napoint = newImage.Height - 90;
            int napointa = image.Width - 200;
            FontFamily ff = new FontFamily("Times New Roman");
            int fontSize = 24;
            Font f = new Font(ff, fontSize, FontStyle.Regular);
            StringFormat sf = new StringFormat();
            Rectangle displayRectangle = new Rectangle(new Point(5, napoint), new Size(newImage.Width - 1, newImage.Height - 1));
            g.DrawEllipse(Pens.Magenta, new Rectangle(0, 0, 1, 1));
            GraphicsPath gp = new GraphicsPath();
            gp.AddString(textnya, ff, (int)FontStyle.Bold, fontSize + 4, new Point(0, 0), sf);
            g.FillPath(Brushes.White, gp);
            g.DrawPath(Pens.Black, gp);

            g.Flush(FlushIntention.Sync);
            g.Dispose();
        }
        image.Dispose();
        string fileName = "ab.jpg";
        string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
        MessageBox.Show(path);
        newImage.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
        newImage.Dispose();
    }

and Its the trigger

    private void button3_Click(object sender, EventArgs e)
    {

        string imagename = "C:\\Documents and Settings\\admin\\My Documents\\Visual Studio 2008\\Projects\\template\\template\\bin\\Debug\\bg.jpg";
        tulisnamafile(imagename, "SlimPort® SP1002; Connect mobile devices to any big screen. High Speed micro USB");

    }

Check the Code result:

Such messing result, UNWRAPPED and with white color

This what I want, and with wrapping?

I found in CodeProject but not luck, its using C++. Based someone in neowin and tried this one too..

But still not luck.

UPDATE:

Here my working code, for who maybe need it... based from Abdias Software's code ( check the answers ), I make small changes ( there some error in those code).

        private static void tulisnamafile(string imagepath, string textnya)
    {

        float fontSize = 22;

        Image image = Image.FromStream(new MemoryStream(File.ReadAllBytes(imagepath)));
        //some test image for this demo
        Bitmap bmp = (Bitmap)Image.FromFile(imagepath);
        Graphics g = Graphics.FromImage(bmp);

        //this will center align our text at the bottom of the image
        StringFormat sf = new StringFormat();
        sf.Alignment = StringAlignment.Center;
        sf.LineAlignment = StringAlignment.Far;

        //define a font to use.
        Font f = new Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel);

        //pen for outline - set width parameter
        Pen p = new Pen(ColorTranslator.FromHtml("#77090C"), 8);
        p.LineJoin = LineJoin.Round; //prevent "spikes" at the path

        //this makes the gradient repeat for each text line
        Rectangle fr = new Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height);
        LinearGradientBrush b = new LinearGradientBrush(fr,
                                                        ColorTranslator.FromHtml("#FF6493"),
                                                        ColorTranslator.FromHtml("#D00F14"),
                                                        90);

        //this will be the rectangle used to draw and auto-wrap the text.
        //basically = image size
        Rectangle r = new Rectangle(0, 0, bmp.Width, bmp.Height);

        GraphicsPath gp = new GraphicsPath();

        //look mom! no pre-wrapping!
        gp.AddString(textnya, f.FontFamily, (int)FontStyle.Bold, fontSize, r, sf);

        //these affect lines such as those in paths. Textrenderhint doesn't affect
        //text in a path as it is converted to ..well, a path.    
        g.SmoothingMode = SmoothingMode.AntiAlias;
        g.PixelOffsetMode = PixelOffsetMode.HighQuality;

        //TODO: shadow -> g.translate, fillpath once, remove translate
        g.DrawPath(p, gp);
        g.FillPath(b, gp);

        //cleanup
        gp.Dispose();
        b.Dispose();
        b.Dispose();
        f.Dispose();
        sf.Dispose();
        g.Dispose();
        string fileName = "ab.jpg";
        string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileName);
        bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
        bmp.Dispose();
    }

解决方案

Just to sum up:

Define a GraphicPath and then use DrawPath to draw outlined version of text, FillPath to draw a filled version.

For the second image with the woman, a second (filled) version is drawn first at a small offset.

For the gradient use LinearGradientBrush for brush. Thickness of the outline is defined by the Pen's thickness.

For wrapping define a StringFormat and use a Rectangle to define the region you want the text to be in.

To center the text you can define the rectangle to have the same width as the image, then set strformat.Alignment to Center.

UPDATE: To replicate the text in the second image you can use this code:

float fontSize = 52;

//some test image for this demo
Bitmap bmp = (Bitmap)Image.FromFile(s"test.jpg");
Graphics g = Graphics.FromImage(bmp);

//this will center align our text at the bottom of the image
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Far;

//define a font to use.
Font f = new Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel);

//pen for outline - set width parameter
Pen p = new Pen(ColorTranslator.FromHtml("#77090C"), 8);
p.LineJoin = LineJoin.Round; //prevent "spikes" at the path

//this makes the gradient repeat for each text line
Rectangle fr = new Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height);
LinearGradientBrush b = new LinearGradientBrush(fr,  
                                                ColorTranslator.FromHtml("#FF6493"),
                                                ColorTranslator.FromHtml("#D00F14"),
                                                90);

//this will be the rectangle used to draw and auto-wrap the text.
//basically = image size
Rectangle r = new Rectangle(0, 0, bmp.Width, bmp.Height);

GraphicsPath gp = new GraphicsPath();

//look mom! no pre-wrapping!
gp.AddString("Demo for Stack Overflow", 
             f.FontFamily, (int)f.Style, fontSize, r, sf);

//these affect lines such as those in paths. Textrenderhint doesn't affect
//text in a path as it is converted to ..well, a path.    
g.SmoothingMode = SmoothingMode.AntiAlias;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;

//TODO: shadow -> g.translate, fillpath once, remove translate
g.DrawPath(p, gp);
g.FillPath(b, gp);

//cleanup
gp.Dispose();
b.Dispose();
b.Dispose();
f.Dispose();
sf.Dispose();
g.Dispose();

bmp.Save(s"test_result.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);
bmp.Dispose();

This will produce this result:

To produce the extra "shadow" just translate the gfirst, draw filled, then remove the translation.

The FromHtml is used here as I picked the colors from your image and was to lazy to convert. Just use Color.FromARGB() or a fixed color - as you want.

VB version:

    Dim fontSize As Single = 52

    Dim bmp As Bitmap = Bitmap.FromFile("c:\test.jpg")
    Dim g As Graphics = Graphics.FromImage(bmp)

    Dim sf As New StringFormat(StringFormatFlags.NoClip)
    sf.Alignment = StringAlignment.Center
    sf.LineAlignment = StringAlignment.Far

    Dim f As New Font("Impact", fontSize, FontStyle.Bold, GraphicsUnit.Pixel)

    Dim p As New Pen(ColorTranslator.FromHtml("#77090C"), 4)
    p.LineJoin = LineJoin.Round

    'rectangle for font to repeat gradient for each line
    Dim fr As New Rectangle(0, bmp.Height - f.Height, bmp.Width, f.Height)
    Dim b As New LinearGradientBrush(fr,
                                     ColorTranslator.FromHtml("#FF6493"),
                                     ColorTranslator.FromHtml("#D00F14"),
                                     90)

    Dim r As New Rectangle(0, 0, bmp.Width, bmp.Height)
    Dim gp As New GraphicsPath

    gp.AddString("Demo for Stack Overflow",
                 f.FontFamily,
                 f.Style,
                 fontSize,
                 r,
                 sf)

    g.SmoothingMode = SmoothingMode.AntiAlias
    g.PixelOffsetMode = PixelOffsetMode.HighQuality

    g.DrawPath(p, gp)
    g.FillPath(b, gp)

    gp.Dispose() 'path
    b.Dispose() 'b
    b.Dispose()  'p
    f.Dispose()  'font
    sf.Dispose()  'stringformat
    g.Dispose()  'g

    bmp.Save("c:\test_result.jpg", Imaging.ImageFormat.Jpeg)
    bmp.Dispose()

这篇关于如何绘制与轮廓文本到影像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！