This project has moved and is read-only. For the latest updates, please go here.

Append multiple rows of images

Mar 20 at 7:37 PM
Edited Mar 20 at 9:55 PM
I have a string array where each element should be a line in my output image. For example
string[] input= new string[2] {"Hello", "World"};
I need to iterate on this array and create an output image (gif) where each letter uses a custom image (see the code below), I would like to have an output image with a background where my "text" is centered (vertically and horizontally)
Sample output: (with a background and centered)

** Horizontal and vertical centered

I'm doing something like: (
foreach (var line in input) // input is the array where I have the text
     foreach (var letter in line) 
          // Depending on the letter load the specific image
          MagickImage image = new MagickImage($"{InputPath}\\{letter}.png");

          // TODO: Allow multiple lines, the following resize and extend are just some of the tests
          // image.Resize(960, 540);
          // image.Extent(960, 540, Gravity.Center);
          // image.Extent(-5, -80 * position, 80, 540);     
          // When I have just one line it works very nice, just doing this:
          image.BackgroundColor = MagickColors.Transparent;                  
     position++; // this is the current line

// Then I'm appending my collection horizontally and adding the background image:
using (MagickImage horizontal = collection.AppendHorizontally())
     horizontal.Extent(new MagickGeometry(960, 540), Gravity.Center);
     using (MagickImage background = new MagickImage("background.png"))
          horizontal.Composite(background, CompositeOperator.DstAtop);
Can anyone please help me with this issue appending multiple rows?

Thanks in advance
Mar 21 at 2:55 AM
I am on a phone right now so I cannot create an example. Let me try it with words. What you should do is go through it line by line. Horizontal append each image and add each line to a new collection. Then vertical append the images and extend it to your requested size. Hope this helps. Otherwise you need to wait a couple weeks so I can create an example on a desktop
Mar 21 at 4:18 AM
I'm doing that, but when I append vertically my two lines the text is not centered, this is like:
Lorem Ipsum is simply dummy text of the printing
Lorem Ipsum has
But I'm expecting it to be like:
Lorem Ipsum is simply dummy text of the printing
                  Lorem Ipsum has
Mar 21 at 5:43 AM
Edited Mar 21 at 5:43 AM
You can avoid that if you extent the line image to the desired width first and use image.height for the height.