[SOLVED] Movable text on canvas lazarus / 39-Graphics ---------------------------------------------------------------------- SaraT · 2020-04-03 02:24 Coders Is it possible to draw transparent and movable text on canvas like MS Paint and how? Please, see attached gif to understand what I need. Many thx. ---------------------------------------------------------------------- eljo · 2020-04-03 03:02 you can emulate the process by using a Timage to draw an image and give you a canvas and a Tlabel on top of it. You will need to write code in the tlabel mouse events to handle moving it. Other than that you need to extend the canvas drawing in to two stages. 1) draw the canvas in to an image or form. 2) draw the latest object placed on the image. With out more content on what you try to do its impossible to offer code. ---------------------------------------------------------------------- flowCRANE · 2020-04-05 03:03 @SaraT: of course it is possible. Some time ago I created a small test application in which I programmed a tool for selecting a fragment of the image. The image is displayed in a TPaintBox component. It looks similar to the one from Paint — it can be moved and extended with nine anchors (or six/four, if they all don't fit). Each anchor and area itself has cursor change support. In addition, the anchor size can be changed with the + and – (non- numeric) keys. I add sources for this program to attachments. You can go ahead and use this code — all you have to do is add the rendering of the text in the frame (Canvas.TextRect method can be used) and that's it. If I were to program such a selection tool today, I would probably do it differently. But the attached one is Ok. ---------------------------------------------------------------------- SaraT · 2020-04-07 05:08 Quote from: furious programming on April 05, 2020, 05:03:20 am@SaraT: of course it is possible. Some time ago I created a small test application in which I programmed a tool for selecting a fragment of the image. The image is displayed in a TPaintBox component. It looks similar to the one from Paint — it can be moved and extended with nine anchors (or six/four, if they all don't fit). Each anchor and area itself has cursor change support. In addition, the anchor size can be changed with the + and – (non- numeric) keys. I add sources for this program to attachments. You can go ahead and use this code — all you have to do is add the rendering of the text in the frame (Canvas.TextRect method can be used) and that's it. If I were to program such a selection tool today, I would probably do it differently. But the attached one is Ok. Thanks, thanks furious. It works like a charm. Is there a way to attach a TLabel to the Selection? So the Selection will move with the text. Thnx again ---------------------------------------------------------------------- flowCRANE · 2020-04-07 22:33 Quote from: SaraT on April 07, 2020, 07:08:44 amIs there a way to attach a TLabel to the Selection? No, since the background and the selection frame are virtual — they are rendered on the TPaintBox canvas. Attaching could be possible, if the frame would be a standalone component, but in my test application, it's not. That's why I recommend to make a text virtual too and just render it inside frame, on the canvas of the same TPaintBox. All elements will be virtual, so you will be able to render what you want at the given moment. ---------------------------------------------------------------------- flowCRANE · 2020-04-07 23:46 I prepared a second test application — the text is rendered inside the selection frame. So that the PaintBox.OnPant event is not too long, I divided them into several smaller methods. The text is painted as white with a black outline — as a nice addition. Check the attachment. For the purposes of this demo, I used the text centering in the selection frame and text wrapping functionality. If you do not need it (or need a different type of alignment), remove or change the TextStyle setup code (below the highlighted lines): 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 procedure TMainForm.DrawPaintBoxSelectionText(ACanvas: TCanvas; ASelection: TSelectionTool; const AText: String);var  TextArea: TRect;  Style: TTextStyle;begin  ACanvas.Font.Size := 20;  ACanvas.Font.Color := clBlack;  ACanvas.Font.Style := [fsBold];   Style := ACanvas.TextStyle;  Style.SingleLine := False;  Style.Alignment := taCenter;  Style.Layout := tlCenter;   {..} ---------------------------------------------------------------------- Handoko · 2020-04-08 02:25 I was wondering how TCanvas can draw outline text. Nice trick furious programming! ---------------------------------------------------------------------- flowCRANE · 2020-04-08 03:22 @Handoko: thanks. This trick is particularly good because it requires no additional libraries and supports anti-aliasing, where the outline has pretty good quality. And if anti-aliasing is turned off, it draws a sharp outline, still looking very cool. 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 type  TCanvasHelper = class helper for Graphics.TCanvas  public    procedure TextOutlined(AX, AY, AOutlineWidth: Integer; AOutlineColor: TColor; const AText: String);  end; procedure TCanvasHelper.TextOutlined(AX, AY, AOutlineWidth: Integer; AOutlineColor: TColor; const AText: String);var  OldFontColor: TColor;  OldBrushStyle: TBrushStyle;begin  OldFontColor := Font.Color;  OldBrushStyle := Brush.Style;   Font.Color := AOutlineColor;  Brush.Style := bsClear;   TextOut(AX - AOutlineWidth, AY - AOutlineWidth, AText);  TextOut(AX + AOutlineWidth, AY - AOutlineWidth, AText);  TextOut(AX + AOutlineWidth, AY + AOutlineWidth, AText);  TextOut(AX - AOutlineWidth, AY + AOutlineWidth, AText);   Font.Color := OldFontColor;  TextOut(AX, AY, AText);   Brush.Style := OldBrushStyle;end; However, this solution has many limitations. It is suitable only for thin outline, 1px wide for small text, for large and thick characters up to 2px. With anti-aliasing turned on, you cannot render more than 4 texts, because the outline quality will be very poor. And you have to change the Brush to bsClear — if not, the outline will be covered by the main text (or will be messy).