|21 of 24|
Welcome to the 21st 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.
Yesterday we already looked at how we can draw with the basic shapes in GraphicsMagick. Today we would like to draw our own shapes. For this we have some functions in the plugin that we can use. We will draw our own shapes with paths. Let's imagine a pen. We tell this pen where it is and where it goes. Let's draw a triangle together. To do this, we first need to move our pen to the start position. For this we use the function GMImage.AddPathMovetoAbs in the parameters we specify the start coordinates for our point (50/50) in addition to the reference.
Set Variable [ $r ; Value: MBS( "GMImage.AddPathMovetoAbs"; $GM; 50; 50 ) ]
We have now specified an absolute position because we want to start exactly at these coordinates. But if you have a look at the documentation of GraphicsMagick you will notice that there is also a very similar function called GMImage.AddPathMovetoRel. The difference between these two functions is that we specify the absolute coordinates (the exact point where we want to place the pen) or the relative coordinates. The relative coordinates describe where the point is in relation to the old position. This means for example if we have a Relative Coordinate (1/1) we go one unit to the right and one unit down from the point where we are currently located. Most path drawing functions from the MBS FileMaker Plugin occur twice with this difference.
We want to draw a line from the point where we are now (50/50) straight down and this line should be 300 pixels long. For this we use the GMImage.AddPathLinetoRel function which expects a relative coordinate from us. So we specify that our coordinate is located 0 pixels to the right from our position and 300 pixels below our position.
Set Variable [ $r ; Value: MBS( "GMImage.AddPathLinetoRel"; $GM; 0; 300 ) ]
Our third triangle coordinate should now be at 400/350. So this time we use the function GMImage.AddPathLinetoAbs and pass it the Absolute Coordinate.
Set Variable [ $r ; Value: MBS( "GMImage.AddPathLinetoAbs"; $GM; 400; 350 ) ]
We have described our three corner coordinates and connected them with two lines. Now we only have to connect the last corner point with the starting point again. For this we can use the already known functions, or we can use the function GMImage.AddPathClosePath which connects the point where our pen is currently located with the starting point.
Set Variable [ $r ; Value: MBS( "GMImage.AddPathClosePath"; $GM ) ]
If we exported our graphics environment into the container like this, we would see that we don't see anything, because we have already prepared the path, but this path is first drawn with the function GMImage.DrawPath.
Set Variable [ $r ; Value: MBS( "GMImage.DrawPath"; $GM )
Our corners are now very sharp if we prefer to round these corners we can use the GMImage.SetStrokeLineJoin function. Here we have a selection from
- UndefinedJoin = 0
- MiterJoin = 1
- RoundJoin = 2
- BevelJoin = 3
Miter Join is where the lines meet in the middle and form sharp edges as we have just seen.
Round Join rounds off the edges
The bevel join creates an additional beveled edge
Set Variable [ $r ; Value: MBS( "GMImage.SetStrokeLineJoin"; $GM; 2 ) ]
We can draw not only straight lines but also curves. We want to draw a cubic Bezier curve and for this we use the function GMImage.AddPathCurvetoAbs. We give this function three points. The first control point (100/300), the second control point (300/100) and the end point (300/300). We don't need to specify the start point, because we already have it by the position of our pen.
Set Variable [ $r ; Value: MBS("GMImage.AddPathCurvetoAbs"; $GM; 100; 300; 300; 100; 300; 300 ) ]
I hope you enjoyed this door and see you tomorrow again for the 22th door of our Advent calendar until then I hope you have fun with your drawings.