« XDC 2022 Highlights V… | Home | Using MBS to Extend X… »

GraphicsMagick in FileMaker, part 10

🎄
10 of 24

Welcome to the 10th door of our advent calendar. In this advent calendar I would like to take you on a journey through the GraphicsMagick component in December. Every day I will introduce you to one or more functions from this component. In this component you will find functions with which you can analyze images, convert them, change them with filters, draw them and much much more. In the end, you too can take the magic of GraphicsMagick to your images. I wish you a lot of fun in the process.

Today we want to write a text in our image. For this we use the function GMImage.Annotate. As in most functions, we first specify the reference, then the text follows. Optionally we can specify where exactly the text should be, the area we specify in the same way as in door 7 for the image section. First the size in pixels and then the x and y offset ( widthxheight+offsetX+offsetY ). We can also set the text alignment. Last but not least, we can even specify that the text should be rotated by a certain number of degrees. If you want you can set not only the text, but also the font, the color of the text, the font size, the color of the text border and the thickness of the text border. For these individual settings we have one function each. It is best if we look directly at the sample code together.

Set Variable [ $GM ; Value: MBS( "GMImage.NewFromContainer"; GraphicsMagick Advent::Image) ] 
Set Variable [ $r ; Value: MBS( "GMImage.SetFont"; $GM; "Georgia" ) ] 
Set Variable [ $r ; Value: MBS( "GMImage.SetFillColor";$GM; "#FF0000" ) ] 
Set Variable [ $r ; Value: MBS( "GMImage.SetLineWidth"; $GM; 2) ] 
Set Variable [ $r ; Value: MBS( "GMImage.SetStrokeColor"; $GM; "#287233") ] 
Set Variable [ $r ; Value: MBS( "GMImage.SetFontPointsize"; $GM; 100 ) ] 
Set Variable [ $Width ; Value: MBS( "GMImage.GetWidth"; $GM ) ]
Set Variable [ $r ; Value: MBS( "GMImage.Annotate"; $GM; "Merry Christmas"; $Width&"x200+0+20"; "CenterGravity"; -10) ] 
Set Field [ GraphicsMagick Advent::Image ; MBS( "GMImage.WriteToContainer"; $GM ; "abc.png" ) ] 
Set Variable [ $r ; Value: MBS( "GMImage.ReleaseAll" ) ] 

We want to display a text centered on the upper part of an image. First we set the font we want to use for the text. For this we can use the function GMImage.SetFont. In addition to the reference, we specify the name of the font here. We can also set the color of the font. The color of the font consists of two components: the fill color, which we can specify with GMImage.SetFillColor by specifying the reference and the color, in this case red, and the line color. The line color is the border of the font, here dark green. We can set this in the function "GMImage.SetStrokeColor. Also we can set the thickness of the border with GMImage.SetLineWidth. To set the size of the font we use the GMImage.SetFontPointsize in our example the font is 100 pt. Before we write to the image we determine the width of the image, because we define our text field in the function GMImage.Annotate over the whole width of the image. In addition, the writing area should have a height of 200 pixels. Since we have defined the width of the text box across the entire width of the image, we don't need an x-offset here, but we do want to move 20 pixels away from the top edge. We set the text aligment to CenterGravity so that we display the text centered. We also want the text to run at a little bit of an upward slant. For this reason we rotate the text 10 degrees counterclockwise. For this we have -10 in our script and we set the text to Merry Christmas. Our result now looks like this:

Now you can give your pictures a font I hope you enjoy it. See you tomorrow

Previous day  

10 12 22 - 08:57