BGRA Drawing Text on a Path issue lazarus / 39-Graphics ---------------------------------------------------------------------- SandyG · 2024-07-05 23:26 Trying to use draw some text on a path and it's close, but I can't quite figure out one of the parameters to do the text centered on the arc. Attached is a picture of where the text ends up. I have fiddled one of the parameters that seems to roll it around but can't quite figure out how to use it. The problem is that as I change the start or end position of the arc, in this case is 0 and 100, the center location of the TextoutCurved seems to change. Here is a snip of the code - Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i  // Calculate draw to point outer   endX := origin.CenterPoint.x - Round(BandRadius * cos((j + BandSettings.EndValue * 270 / ScaleSettings.Maximum) * Pi / 180));  endY := origin.CenterPoint.y - Round(BandRadius * sin((j + BandSettings.EndValue * 270 / ScaleSettings.Maximum) * Pi / 180));  endAngle :=  -arctan2((endY - Origin.CenterPoint.y),(endX - Origin.CenterPoint.x));   // Need to set the line cap to flat or will be rounded by default   FBandBitmap.LineCap := pecFlat;  FBandBitmap.Arc(                   Origin.CenterPoint.x, Origin.CenterPoint.y,                   BandRadius + 0.5, BandRadius + 0.5, // push down a bit                 // (360-135) 225, -45                   // 3.92699,-0.785398, // must use start and end angle, internally Point calcs won't work due to arcsin2() limits                   startAngle, endAngle,                 BandSettings.BandColor,                   BandSettings.Thickness,                   false,                   BGRA(0,0,0,0) // last param is alpha, so no interior color, inner routings ONLY draw the arc, no fill                   );   FontRenderer := TBGRAVectorizedFontRenderer.Create;  FBandBitmap.FontRenderer := fontRenderer; //assign text vectorial font renderer  FBandBitmap.FontHeight := round(TextSize * 0.09);  FBandBitmap.FontQuality := fqFineAntialiasing;  FBandBitmap.FontName:=BandSettings.TextFont;  FontRenderer.OutlineColor := BGRABlack;  FontRenderer.OutlineWidth := TextSize / 600;  FontRenderer.OutlineVisible := true;  FBandBitmap.FontVerticalAnchor := fvaBaseline;  TextPath := TBGRAPath.Create; /// the odd 0.61 parameter does something to shift the position of the text/// path but not sure how to make it work as the band size changes./// look in the BGRA code to see if it may be a hint somewhere...   TextPath.Arc(Origin.CenterPoint.x, Origin.CenterPoint.y,               TextRadius, TextRadius, // push down a bit               0.61 {This is the ODD Parameter to move the text ??}, endAngle + 0.61, startAngle + 0.61, False); // 35 degs/0.61 offset for arc to match scale   FBandBitmap.TextOutCurved(TextPath, BandSettings.Text, BandSettings.TextColor, taCenter, 0); The question is how can I draw text ALWAYS centered in the arc as the Start and End Angles may change. I have the start and end angles flipped to draw text in the correct orientation. I'm close but can't quite get this one over the edge. I got this example from some old code on the forum so maybe a better way to do it. Super slick if I can get it to work. My Math skill are weak with all these transforms  Sandy ---------------------------------------------------------------------- circular · 2024-07-07 00:13 hi Sandy, I suggest to draw the TextPath to see what is the actual path you get (for example using its stroke function). Regards ---------------------------------------------------------------------- Roland57 · 2024-07-07 12:04 My two cents: Don't use Round. Use float coordinates. ---------------------------------------------------------------------- SandyG · 2024-07-08 15:38 @circular - Tried that and it gives a nice indication of where the Text is drawing against the text path arc I have to look at my code first to make sure the translation is correct, I forget that angles are offset (0 on the gauge scale is like 30 degs offset, not 0 degrees as straight down).  What's odd is the FBandBitmap's arc looks as it should (see attached pic, in this case 0-80 on the scale.  The same parameters are passed to both the   FBandBitmap.Arc() call and the TextPath.Arc() call but from the looks of things they don't seem to be consistent or I'm missing some magic. But still feels like I'm missing something or an 'undocumented' feature in the way the TextPath works. I simplified the code to do this Code: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i ...BandRadius := BandSettings.BandRadius - BandSettings.Thickness div 2;TextRadius := BandSettings.TextRadius - BandSettings.TextSize div 2 - BandSettings.Thickness div 2; // Draw the thick green arc  FBandBitmap.Arc(                   Origin.CenterPoint.x, Origin.CenterPoint.y,                   BandRadius + 0.5, BandRadius + 0.5, // push down a bit                   startAngle, endAngle,                 BandSettings.BandColor,                   BandSettings.Thickness,                   false,                   BGRA(0,0,0,0));   TextPath.Arc(               Origin.CenterPoint.x, Origin.CenterPoint.y,  // center               TextRadius, // arc radius               startAngle,  // start of the band. used used in drawing the scale's green arc               endAngle,   // End of the band. used used in drawing the scale's green arc               False);   // Draw the text along the new path, centered  FBandBitmap.TextOutCurved(TextPath, BandSettings.Text, BandSettings.TextColor, taCenter, 0);  FBandBitmap.DrawPath(TextPath, clBlack, 1, 1); // DEBUG - draws the black under the xXx in the pic.... ---------------------------------------------------------------------- SandyG · 2024-07-08 15:40 Quote from: Roland57 on July 07, 2024, 02:04:26 pmMy two cents: Don't use Round. Use float coordinates. Will have a lot of that to clean up I think once I get it a bit more stable and working. As it is, seems to be OK, but I can see where a lot of accumulated errors might make things not align. The odd part is some things are int pixles mixed with floats. Have that to clean up... Thanks Sandy ---------------------------------------------------------------------- circular · 2024-07-08 16:13 Hi Sandy, Thanks for the image  I guess the problem is that the angle in TBGRAPath is radian clock- wise (this is Canvas2d convention), instead of counter-clockwise for usual radian angle. You can compensate by putting a minus sign to get the opposite value. It is kind of documented with the CW suffix in the parameter name. Explanations on angle conventions is explained at the top of BGRAPath source code. Hope this solve your issue. Regards ---------------------------------------------------------------------- SandyG · 2024-07-09 03:12 @Circular ❤️ That worked! I can't tell you how many time I have mashed F9 over the past few days trying every thing that I thought was wrong with my translation code. For me it's always a try and see vs. actual math! Can't thank you enough for this one, I really got stuck and the brute force method of trying things just didn't work. For reference the previous code I had was just changing the both start and end angles to negative!   TCode: Pascal  [Select][+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i extPath.Arc(Origin.CenterPoint.x, Origin.CenterPoint.y,               TextRadius, //TextRadius, // push down a bit               // ((BandSettings.EndValue - BandSettings.StartValue) / 2 + BandSettings.StartValue - 60) * PI / 180,               //textAngle,             -startAngle,  // start and end need to be '-' as drawing is backwards vs. the Arc.               -endAngle,               False);  Sandy ---------------------------------------------------------------------- circular · 2024-07-09 03:18 Wonderful! The gauge looks quite slick.  I understand the process has been tedious for you but in the end we found a way. Again, the result is visually appealing! ---------------------------------------------------------------------- SandyG · 2024-07-09 03:26 I'm having fun, learning, and making stuff to give back. The Delphi and now the Lazarus community has always been my favorite folks, always cool stuff and easy to use. Again, couldn't have done it without your (continued) support. Sandy