CODEWITHSUNDEEP
delphicanvasopacityfiremonkeydelphi-xe3
Andrei Galatyn
Andrei Galatyn

Reputation: 3432

Delphi FireMonkey app can not draw simple black rectangle

Just create simple FireMokey HD app, put TImage with align=alclient on the form and trying to draw simple black rect:

procedure TForm8.FormCreate(Sender: TObject);
var
  c: TCanvas;
begin
  Image.Bitmap := TBitmap.Create(ClientWidth, ClientHeight);
  c := Image.Bitmap.Canvas;
  c.BeginScene;
  try
    c.Clear(claWhite);
    c.Stroke.Color := claBlack;
    c.Stroke.Kind := TBrushKind.bkSolid;
    c.DrawRect(
      TRectF.Create(7,7,ClientWidth-7,ClientHeight-7),
      0,0,
      [],
      1
    );
  finally
    c.EndScene;
  end;
end;

And it doesn't work. Color of the rect is not black, it is kind of gray. There some changes of the color in corners. Did i need to set some other properties or what is wrong here ? I tried different opacity values (1,100,255,65535), picture doesn't change at all and there is no information in the help what the hell this option means. Zoomed left-top corner:

enter image description here

Also tried to use polygons as it described in example. Same problem - rounded corners and gray color instead of black (Opacity property of image is 1, all properties as by default):

procedure TForm8.Button2Click(Sender: TObject);
var
  p1, p2, p3, p4, p5: TPointF;
  MyPolygon: TPolygon;
begin
  // sets the points that define the polygon
  p1.Create(100, 100);
  p2.Create(200, 100);
  p3.Create(200, 200);
  p4.Create(100, 200);
  p5.Create(100, 100);
  // creates the polygon
  SetLength(MyPolygon, 5);
  MyPolygon[0] := p1;
  MyPolygon[1] := p2;
  MyPolygon[2] := p3;
  MyPolygon[3] := p4;
  MyPolygon[4] := p5;
  Image.Bitmap.Canvas.BeginScene;
  // draws the polygon on the canvas
  Image.Bitmap.Canvas.DrawPolygon(MyPolygon, 50);
  Image.Bitmap.Canvas.EndScene;
  // updates the bitmap
//  Image.Bitmap.BitmapChanged;
 end;

Upvotes: 0

Views: 7947

Answers (2)

phr
phr

Reputation: 11

This is easy to fix once you understand the better paradigm of Firemonkey. Firemonkey uses real coordinates, not integer coordinates. You unwittingly told it to draw lines that were centered the boundaries between pixels, so each of your lines were half in one set of pixels and half in another set of pixels.

Specifically, what happened is that your integer coordinates were interpreted as exact center points on a continuous number line. For example, say the point is 7. A line of width 1 centered on the point at 7.0 will extend from 6.5 to 7.5 on the number line. But because the pixels extend from 6.0 to 6.99 and from 7.0 to 7.99 on the number line, each pixel is half black and half white. Automatic antialiasing caused them to be drawn 50% black, which is where the two-pixel wide gray comes from.

When using FMX (now called FMX) you have to switch your thinking from integer coordinates to real coordinates, which is far more sophisticated and powerful.

The easiest solution is to move your integer-based math by 0.5 to the right and 0.5 down. Then a one-pixel wide line at 7.5 will extend from 7.0 to 7.999, which is what you were expecting. To do this, just add 0.5 to all your pixel coordinates, both horizontal and vertical, as you issue drawing commands.

The nice thing is, lines that are 0.8 pixels wide or 1.5 pixels wide will automatically appear thinner or thicker, respectively. Diagonal lines and other curves will appear correct without jagged edges. You can scale complex drawings and they will look perfect at any zoom level. (The math for the half-pixel shift stays the same for all zoom levels. The 0.5 is added after scaling immediately before drawing the line.)

The above is true for all devices: screens, bitmaps, and printers, etc. So the same code to draw on screen can be used to draw to everything else. When drawing text, you can use fractional point sizes for the fonts, so they scale with everything else.

Upvotes: 1

FMXExpress
FMXExpress

Reputation: 1276

http://roman.yankovsky.me/?p=1018

if Canvas.BeginScene then
try
  Canvas.Stroke.Thickness := 1.5;
  Canvas.Stroke.Kind := TBrushKind.bkSolid;
  Canvas.Fill.Color := TAlphaColorRec.Black;
  Canvas.Fill.Kind := TBrushKind.bkSolid;

  for I := 1 to 9 do
  begin
    Canvas.DrawLine(PointF(50 + I * 25 - (Canvas.Stroke.Thickness / 2), 0),
      PointF(50 + I * 25 - (Canvas.Stroke.Thickness / 2), ClientHeight), 1);
  end;
finally
  Canvas.EndScene;
end;

Upvotes: 1

Related Questions