Text rotation

[Devtaofeek]

I want to know if it is possible to rotate text using imagesharp library

[antonfirsov]

Yes, but the solution is not really beginner-friendly unfortunately. You need to look into the following example that draws the text along an arbitrary path:

ImageSharp.Drawing/samples/DrawShapesWithImageSharp/Program.cs

Lines 49 to 54 in c29e5de

	DrawText("Hello World Hello World Hello World Hello World Hello World Hello World Hello World", new Path(new CubicBezierLineSegment(
	new Vector2(0, 0),
	new Vector2(150, -150),
	new Vector2(250, -150),
	new Vector2(400, 0)
	)));

(Use LinearLineSegment instead of CubicBezierLineSegment.)

Alternatively, you can just render the text to an Image, then rotate the image. (image.Mutate(c => c.Rotate(degrees)))

[Devtaofeek]

We need to improve the developer story here. System Drawing allows setting a transform matrix

how can I use this for the rotation?

[antonfirsov]

I also want to ask how to set opacity on a text using image sharp.

There are two options, depending on what fits you needs better:

1. You can use an opaque color when rendering the text (alpha < 255)

image.Mutate(c => c.DrawText("text", font, Color.FromRgba(255, 255, 255, 127), new PointF(10,10)));

2. You may want to draw your rotated image on another image using an opacity value:

foregroundImage.Mutate(c => c.DrawText(...).Rotate(...));
PointF location = new PointF(123, 45);
backgroundImage.Mutate(c => c.DrawImage(foregroundImage, location, 0.5f));

[antonfirsov]

We need to improve the developer story here. System Drawing allows setting a transform matrix

@JimBobSquarePants this shouldn't be very hard to implement, although there are some open questions to resolve: #125

[Devtaofeek]

I have gone with number 2 option, how can I add z-index with the library

[antonfirsov]

There is no concept of Z-index when you are drawing an image on top of another. You have only 2 images (source and destination), and PixelColorBlendingMode , PixelAlphaCompositionMode together with opacity define how to draw the source on the destination. You should be most likely OK with the defaults for the modes.

[tocsoft]

This can now be done using the various Transform APIs for drawing.

There are 2 general ways to do this, either using the shaired context setting SetDrawingTransform() or directly on a DrawingOptions when calling a specific API.

using SetDrawingTransform()

image.Mutate(x => x
          // set a transform to be applied to all drawing operations within this Mutate scope.
          .SetDrawingTransform(Matrix3x2Extensions.CreateRotationDegrees(45, new PointF(50, 50))) 
          .DrawText("foo bar", font, Color.Black, new PointF(50, 50)));

Using DrawingOptions

  image.Mutate(x => x
            .DrawText(
                new DrawingOptions { 
                    Transform = Matrix3x2Extensions.CreateRotationDegrees(45, new PointF(50, 50))
                },  
               "foo bar", 
               font, 
               Color.Black, 
               new PointF(50, 50)));