How to draw the stroked text with blur and soft edge onto an image?

Aspose.Imaging Product Family
1

Hi, Support:

How to draw the stroked text with blur and soft edge onto an image? please see the example image attached.

Text-With-Soft-blue-shade stroke-edge.jpg919×425 71.4 KB

Thanks for your help.

2

@ducaisoft , here is the code example to stroke a text with soft edge onto an image:

var outputPath = @"output.png";
using (var image = Image.Create(new PngOptions(), 1024, 1024) as RasterImage)
{
    var gr = new Aspose.Imaging.Graphics(image);
    gr.SmoothingMode = SmoothingMode.AntiAlias;
    gr.TextRenderingHint = TextRenderingHint.AntiAlias;

    gr.Clear(Color.LightBlue);

    var text = "Some text";
    var textBounds = image.Bounds;
    var font = new Font("Arial", 100);
    var stringFormat = new StringFormat
    {
        LineAlignment = StringAlignment.Center,
        Alignment = StringAlignment.Center,
    };

    var figure = new Figure();
    figure.AddShape(new TextShape(text, textBounds, font, stringFormat));

    var graphicsPath = new GraphicsPath();
    graphicsPath.AddFigure(figure);

    gr.DrawPath(
        new Pen(Color.Black, 1),
        graphicsPath);

    image.Save(outputPath);
}

As concerns the blur, you might mean text drop shadow effect. It is not supported by default in Aspose.Imaging, but you are up create a custom implementation using gradient brush or another approach.
Hope this helps!

3

Thanks for your suggestion.
However, what you suggested is not my purpose.
As concerns the blur, it is text-edge-soft effect, not shadow effect.
Could you provide me a demo how to use gradient brush to reach it? or else what is the another approach?

4

@ducaisoft , soft edge text effect is usually achieved using antialiased rendering. As concerns gradient usage, you might use radial gradient to add smooth color transition:

var outputPath = @"output.png";
using (var image = Image.Create(new PngOptions(), 2048, 2048) as RasterImage)
{
    var gr = new Aspose.Imaging.Graphics(image);
    gr.SmoothingMode = SmoothingMode.AntiAlias;
    gr.TextRenderingHint = TextRenderingHint.AntiAlias;

    gr.Clear(Color.LightBlue);

    var text = "Some text";
    var textBounds = image.Bounds;
    var font = new Font("Arial", 100);
    var stringFormat = new StringFormat
    {
        LineAlignment = StringAlignment.Center,
        Alignment = StringAlignment.Center,
    };

    var figure = new Figure();
    figure.AddShape(new TextShape(text, textBounds, font, stringFormat));

    var graphicsPath = new GraphicsPath();
    graphicsPath.AddFigure(figure);

    gr.FillPath(
        new SolidBrush(Color.White),
        graphicsPath);

    // radial gradient brush example 
    var intensity = 175;
    var gray = Color.FromArgb(intensity, intensity, intensity);
    gr.DrawPath(
        new Pen(Color.Empty, 1f)
        {
            Brush = new PathMulticolorGradientBrush(graphicsPath)
            {
                InterpolationColors = new ColorBlend
                {
                    Colors = new Color[]
                    {
                        Color.FromArgb((int)(byte.MaxValue * 0.2f), gray),
                        Color.FromArgb((int)(byte.MaxValue * 0.4f), gray),
                        Color.FromArgb((int)(byte.MaxValue * 0.6f), gray),
                        Color.FromArgb((int)(byte.MaxValue * 0.8f), gray),
                        gray,
                    },
                    Positions = new float[] { 0, 0.25f, 0.5f, 0.75f, 1 },
                }
            }
        },
        graphicsPath);

    image.Save(outputPath);
}
5

Thanks for your demo. this maybe meet my requirement.
However, I Convert the demo into VB.net 4.6.1 and based on Apose.imaging.dll v23.4,but it fails, so I don’t know its result. The text effect in the sample image also may be outer-soft-glow effect in PS.
Would you provide me the VB.net demo?

6

@ducaisoft , here is the VB code example:

Dim outputPath As String = "output.png"
Using image As RasterImage = TryCast(Image.Create(New PngOptions(), 2048, 2048), RasterImage)
    Dim gr As New Aspose.Imaging.Graphics(image)
    gr.SmoothingMode = SmoothingMode.AntiAlias
    gr.TextRenderingHint = TextRenderingHint.AntiAlias

    gr.Clear(Color.LightBlue)

    Dim text As String = "Some text"
    Dim textBounds As Rectangle = image.Bounds
    Dim font As New Font("Arial", 100)
    Dim stringFormat As New StringFormat With {
        .LineAlignment = StringAlignment.Center,
        .Alignment = StringAlignment.Center
    }

    Dim figure As New Figure()
    figure.AddShape(New TextShape(text, textBounds, font, stringFormat))

    Dim graphicsPath As New GraphicsPath()
    graphicsPath.AddFigure(figure)

    gr.FillPath(New SolidBrush(Color.White), graphicsPath)

    ' Radial gradient brush example
    Dim intensity As Integer = 175
    Dim gray As Color = Color.FromArgb(intensity, intensity, intensity)
    gr.DrawPath(New Pen(Color.Empty, 1.0F) With {
        .Brush = New PathMulticolorGradientBrush(graphicsPath) With {
            .InterpolationColors = New ColorBlend With {
                .Colors = New Color() {
                    Color.FromArgb(CInt(Byte.MaxValue * 0.2F), gray),
                    Color.FromArgb(CInt(Byte.MaxValue * 0.4F), gray),
                    Color.FromArgb(CInt(Byte.MaxValue * 0.6F), gray),
                    Color.FromArgb(CInt(Byte.MaxValue * 0.8F), gray),
                    gray
                },
                .Positions = New Single() {0, 0.25F, 0.5F, 0.75F, 1}
            }
        }
    }, graphicsPath)

    image.Save(outputPath)
End Using
7

Thanks!
However, it throws an exception as follow, and I don’t know how to fix it.

123.png879×866 17.1 KB
123.png (17.1 KB)

8

@ducaisoft , please specify ImageOptionsBase.Source when creating an image:

Dim options As New PngOptions With {
Source  = new StreamSource(),
}