Search code examples
delphidrawantialiasingtlistbox

Delphi: draw anti-aliased triangle


How can I draw anti-aliased triangle on ListBoxDrawItem?

ListBox.Canvas.Polygon

draws with jags.

Thanks!!!


Solution

  • The simplest approach to achieve anti-aliased drawing with GDI is to draw to a larger surface, then scale back to original dimensions having halftone enabled stretching mode.

    Below code example uses a 16 times larger bitmap then the list box's client area (this is a considerably larger bitmap and it will take a good time to do the drawings, but the effect should be seen easier).

    procedure TForm1.Button1Click(Sender: TObject);
    const
      ZOOM = 16;
    var
      Bmp: TBitmap;
      StretchMode: Integer;
    begin
      // for comparison
      ListBox2.Canvas.Polygon([Point(20, 10), Point(10, 50), Point(80, 30)]);
    
    
      Bmp := TBitmap.Create;
      // create a large bitmap and set coordinate extents accordingly
      Bmp.SetSize(ListBox1.ClientWidth * ZOOM, ListBox1.ClientHeight * ZOOM);
      SetMapMode(Bmp.Canvas.Handle, MM_ISOTROPIC);
      SetWindowExtEx(Bmp.Canvas.Handle, 100, 100, nil);
      SetViewportExtEx(Bmp.Canvas.Handle, 100 * ZOOM, 100 * ZOOM, nil);
      // without halftone we won't gain anything
      SetStretchBltMode(Bmp.Canvas.Handle, HALFTONE);
      // transfer what's on the list box to bitmap canvas
      BitBlt(Bmp.Canvas.Handle, 0, 0, Bmp.Width, Bmp.Height,
              ListBox1.Canvas.Handle, 0, 0, SRCCOPY);
    
      Bmp.Canvas.Polygon([Point(20, 10), Point(10, 50), Point(80, 30)]);
    
      // transfer bitmap contents
      StretchMode := SetStretchBltMode(ListBox1.Canvas.Handle, HALFTONE);
      StretchBlt(ListBox1.Canvas.Handle, 0, 0,
          ListBox1.ClientWidth * ZOOM, ListBox1.ClientHeight * ZOOM,
          Bmp.Canvas.Handle, 0, 0, Bmp.Width, Bmp.Height, SRCCOPY);
      SetStretchBltMode(ListBox1.Canvas.Handle, StretchMode);
    
      Bmp.Free;
    end;
    


    In the below picture, in the left is the ListBox1 - the one drawn with anti-aliasing. Please notice that the text also have gained some of the effect:

    enter image description here

    I would of course advise you to take one of David's suggestions into account. This code was rather experimental :).