FMX drawing problem

I am having trouble drawing in FMX, with what it draws being rather different from what the programme draws when built for windows.

Background: edit boxes on FMX are almost invisible when empty. They have no borders, and are transparent. I want to make a couple of them obvious, by putting them on a coloured background with the area for the edit box whited out, with a black border around the box.

The programme demonstrating the problem is http://c443799.r99.cf2.rackcdn.com/ImageLines.zip

It works beautifully on windows, and nothing like what it is supposed to do no FMX.

Anyone else had similar problems? Or is there some FMX difference I have failed to grasp?

The problem occurs on a samsung s22, a huawei P20 pro, and a couple of tablets (s2 and s8).

This seems like a styling issue. Have you considered using styles ? If you are going to, you’ll need one style for each target OS.

Agreed, although https://www.embarcadero.com/free-tools/firemonkey-stencils claims to enable “platform agnostic” theming

No, I am not after styles. I just need to know if there is an FMX drawing bug (in which case I would like a fix), or something I don’t understand about FMX/Windows differences (in which case a new brain might help!).
It just seems that the FMX routines do not do what they are supposed to and where they put things is not where they put them with the same values in Windows! Run the programme in windows, then in android, and tell me what you think.

Just checking - you are asking about fmx on android vs fmx on windows ?

I did not know there was FMX on windows. All I know is that if I set the target to windows 32 it works fine. If I set the target to an android device it screws up the drawing something horrid!

1 Like

Paul, did you have any suggestions? I really, really want to find out how to get the drawing stuff working under FMX on studio 11.1. It worked on previous versions, and screws up something horrid on 11.1, as per the demo programme. I don’t want theming: I want the most basic stuff to work, and it doesn’t!

In FMX, pretty much any control can contain any other control, would having the edits being contained in another control give you a usable result? Would avoid any drawing…

Interesting thought - thanks. However, I still want to be able to draw on a canvas, and all I am getting is very strange results. Is nobody else having these problems?

Your example zip gives security warnings trying to download it. Can you post a minimal source example here that demonstrates the problem?

Elvind, FireFox gives a security warning on the cloud file server, but Chrome and Edge have no problem with it. (I told FireFox to go ahead and download it, and it did, and the files are ok).

Hi Chester
If you are trying to draw on a raw FMX canvas My Library on git

May give you some help

Code basically plots Long Lat points on an image and adds scale bars. But has lots of examples of putting a line or ellipse on the image.

From memory I had trouble with canvas scaling on some phones especially on a raw canvas so I opted to use an image canvas.

G’day, Roger.
Even using an image canvas I am getting an odd effect. Is any of this familiar to you? I think I have simplified the problem about as much as I can.

Try creating an FMX programme, with one image and one edit box (with some text in it if you like).
The programme can be compiled with Scale = 1 for windows, and it works fine drawing the edit box in a black rectangle. It can be compiled (see the options in the code) for Android - but has to have the scaling set to 0.31 or the results are horrible. Do you think this is a phone problem or an Embarcadero problem?

Here is the programme (put the Resize routine in for the main form):

unit ImageLine1Unit;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.Edit, FMX.Memo.Types, FMX.ScrollBox, FMX.Memo,
  FMX.Objects;

type
  TForm1 = class(TForm)
    Image1: TImage;
    Edit1: TEdit;

    procedure FormResize(Sender: TObject);
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: tForm1;

implementation

{$R *.fmx}

procedure tForm1.FormResize(Sender: TObject);
var
   Rect, e1Rect : tRectf;
begin
   Image1.Position.X := 20;
   Image1.Position.Y := 30;

   Edit1.Position.X := (ClientWidth - Edit1.Width) / 2;
   Edit1.Position.Y := 60;

   //Create rectangle positions for edit box with respect to the image.
   e1Rect := tRectf.Create(
      Edit1.Position.X - Image1.Position.X,
      Edit1.Position.Y - Image1.Position.Y,
      Edit1.Position.X - Image1.Position.X + Edit1.Width,
      Edit1.Position.Y - Image1.Position.Y + Edit1.Height);

//For Windows:
{
   Image1.Scale.X := 1;
   Image1.Scale.Y := 1;

   Image1.Height := 200;
   Image1.Width := (ClientWidth - 40);
}
//For Android:

   Image1.Scale.X := 0.31;
   Image1.Scale.Y := 0.31;

   Image1.Height := 200 * 3;
   Image1.Width := 3 * (ClientWidth - 40);


   Image1.Bitmap.SetSize(round(Image1.Width), round(Image1.Height));


   Image1.Bitmap.Canvas.Stroke.Kind := tBrushKind.Solid;
   Image1.Bitmap.Canvas.Stroke.Color := tAlphaColorRec.Black;
   Image1.Bitmap.Canvas.Stroke.Thickness := 2;

   Image1.Bitmap.Canvas.BeginScene;

   //Colour the whole image first
   Image1.Bitmap.Canvas.Clear(tAlphaColorRec.Lightsalmon);

   //Now white out the bit where we want to place the edit box
   Rect.Left := e1Rect.Left - 1;
   Rect.Right := e1Rect.Left + Edit1.Width + 1;
   Rect.Top := e1Rect.Top;
   Rect.Bottom := e1Rect.Top + Edit1.Height + 1;

   Image1.Bitmap.Canvas.ClearRect(Rect, tAlphaColorRec.Yellow);

   //Now draw the rectangles

   Rect.Left := e1Rect.Left - 1;
   Rect.Right := e1Rect.Left + Edit1.Width + 1;
   Rect.Top := e1Rect.Top - 1;
   Rect.Bottom := e1Rect.Top + Edit1.Height + 1;

   Image1.Bitmap.Canvas.DrawRect(Rect, 1);

   Image1.Bitmap.Canvas.EndScene;
end;

end.

Yes I had similar issues.

I am looking for my notes - probably in the code.

From memory I was testing on two phones
one a very small old phone and a more up to date phone.
On one phone scaling was not needed and the app worked the same as on windows but on the other (I think the up to date one) I had to apply an additional scaling factor as you have to get things right.

It makes me wonder whether there is some kind of resolution control, with some phones having both a high-resolution and a normal-resolution mode, but I can’t find anything in Delphi about it.
Do you reckon it would be worth sending it to quality.embarcadero.com, as having to write code separately for every b… phone borders on the ridiculous!

Why don’t you ask on Delphi Praxus?

Thanks, Sue - good idea. I have put it up there tonight.

1 Like

I found my comment and it seems there is a canvas scale parameter which I played around with

    ScaledWidth := ACanvas.width;
    ScaledHeight := ACanvas.height;
    if CanvasScale > 1 then
    Begin // no idea why but seems to be required Scale < 1 on Pocket Neo
      ScaledHeight := ScaledHeight / CanvasScale;
      ScaledWidth := ScaledWidth / CanvasScale;
    End;
    TextRect.Create(ACanvas.Offset, ScaledWidth,
      ScaledHeight * AFractionPerLine);
    TextHeightLimit := ScaledHeight * AFractionFromTop;
    TextRect.Offset(0.0, TextHeightLimit);
    TextRect.Left := TextRect.Left + TextRect.width * 0.05;
    TextRect.width := TextRect.width * 0.9;

    PathRect := SizeCanvasFont(ACanvas, TextRect.width, TextRect.height, ATxt);
    Case AAlignment of
      TTextAlign.Center:
        AlignOffset := ScaledWidth / 2 - PathRect.width / 2;
      TTextAlign.Leading:
        AlignOffset := TextRect.Left;
      TTextAlign.Trailing:
        AlignOffset := TextRect.Right - PathRect.width;
    else
      AlignOffset := 0;
    End;

Might be what you are looking for