Envelope Distortion with .Net Graphicspath

Question

I'm trying to figure out the best way to accomplish warping a GraphicsPath in .net to a specific shape. The result I'm trying to achieve is warping text to curve up, down, fan left, right, and things like a wave. All of these can be achieved in Adobe Illustrator using the envelope distort feature.

I have considered rolling my own method of doing this using some of predefined grid and point mapping system to transform points. However, it seems like there would be some algorithms or samples as to how to do this already available?

Particleman · Answer 1 · 2013-12-28T18:14:15.110

4

I wanted to follow up to this post I made some time ago. I have had worked out a few other ways to accomplish what I wanted to do originally in this post. First off GraphicsPath has a nice warp() method which performs just that, warping any path into the 4 points of a rectangle. Using this idea you can accomplish this below.

Warping up to the right

Here is the same warp applied to a path with text arched up

Text Arched Up Warp

This is the classic star wars text warp by just setting the 4 points of the rectangle in the warp() method

The same warp applied to a path that is arched up.

Arched Down with a Star Wars Warp

What I have concluded is a lot of warps can be accomplished by first typing on a path such as an arch or a wave, then applying the warp() method in a GraphicsPath.

Updated

I finally got around to actually coming up with a real solution to this almost 2 years later. I posted an in depth explanation with code on my blog. Read it here

edited Dec 28 '13 at 18:14

answered Sep 25 '12 at 14:07

Particleman

661
2
7
19

It will be awesome if you post the code related to your effects! – Cyril Gandon Dec 10 '13 at 13:30
@CyrilGandon I just [linked over](http://lonetechie.com/2013/12/28/envelope-distortion-using-c-and-graphicspath-class/) to a blog post I made about this – Particleman Dec 29 '13 at 14:28
Note that GeographicsPath.Warp isn't working on Linux just yet. https://github.com/dotnet/corefx/issues/33528 – Serge Pavlov Nov 16 '18 at 16:47

score 3 · Accepted Answer · answered Jan 26 '12 at 14:18

Here's a couple of methods from a captcha generator we use that might steer you in the right direction:

    internal static void DrawPhrase(
        this Graphics graphics, 
        int width, 
        int height, 
        string phrase)
    {
        graphics.FillRectangle(
            Brushes.White,
            0,
            0,
            width,
            height);

        using (var gp = new GraphicsPath())
        {
            gp.AddString(phrase,
                         FontFamily.GenericMonospace,
                         (int)FontStyle.Bold,
                         33f,
                         new Point(0,
                                   0),
                         StringFormat.GenericTypographic);

            using (var gpp = gp.Deform(width, height))
            {
                var bounds = gpp.GetBounds();
                var matrix = new Matrix();
                var x = (width - bounds.Width) / 2 - bounds.Left;
                var y = (height - bounds.Height) / 2 - bounds.Top;
                matrix.Translate(x,
                                 y);
                gpp.Transform(matrix);
                graphics.FillPath(Brushes.Black,
                                  gpp);
            }
        }

        graphics.Flush();
    }
    internal static GraphicsPath Deform(
        this GraphicsPath path, 
        int width, 
        int height)
    {
        var WarpFactor = 4;
        var xAmp = WarpFactor * width / 300d;
        var yAmp = WarpFactor * height / 50d;
        var xFreq = 2d * Math.PI / width;
        var yFreq = 2d * Math.PI / height;
        var deformed = new PointF[path.PathPoints.Length];
        var xSeed = rng.NextDouble() * 2 * Math.PI;
        var ySeed = rng.NextDouble() * 2 * Math.PI;
        var i = 0;
        foreach (var original in path.PathPoints)
        {
            var val = xFreq * original.X + yFreq * original.Y;
            var xOffset = (int)(xAmp * Math.Sin(val + xSeed));
            var yOffset = (int)(yAmp * Math.Sin(val + ySeed));
            deformed[i++] = new PointF(original.X + xOffset,
                                     original.Y + yOffset);
        }

        return new GraphicsPath(deformed,
                                path.PathTypes);
    }

Envelope Distortion with .Net Graphicspath

2 Answers2

Updated