How to resize Timage (jpeg) to fit in a cell drawgrid
lazarus / 39-Graphics

----------------------------------------------------------------------
WimVan · 2018-12-19 13:18

Hi,
I have next 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 procedure
TMASTERform.fotogridDrawCell(Sender: TObject; aCol, aRow: Integer; 
aRect: TRect; aState: TGridDrawState);var  image : TImage;  foto :
string;  ntop, nleft, nfirst : integer;  lfotook : boolean; 
cellWidth, cellHeight: LongInt;  cvs: TCanvas;  Rect: TRect;begin  if
RASTERQuery.Active then  begin    if Sender is TDrawGrid    then cvs
:= TDrawGrid(Sender).Canvas    else cvs := fotogrid.Canvas;    Rect :=
aRect;    lfotook := true;    if (aCol = 0) and (aRow = 0)    then
RASTERQuery.First    else    begin      if not RasterQuery.EOF     
then RasterQuery.Next      else lfotook := false;    end;  end  else
lfotook := false;  if lfotook then  begin    if
RASTERQuery.FieldByName('ty').AsString = 'D'    then foto := DIR_SLIDE
+RASTERQuery.FieldByName('foto_dir').AsString+'\'+RASTERQuery.FieldByN
ame('foto').AsString    else foto := 'avi-mjpg-flv.jpg';     cellWidth
:= aRect.Right-aRect.Left;    cellHeight := aRect.Bottom-aRect.Top;  
 image := TImage.Create(Self);    try     
image.Picture.LoadFromFile(foto);      image.Width        := cellWidth
- 10;      image.Height       := cellHeight - 10;      image.AutoSize
   := false;      image.Proportional := true;      image.Stretch    
 := false;      image.Cursor       := crHandPoint;      ntop  :=
Rect.Top + 5;      nleft := Rect.Left + 5;      cvs.Draw(nleft, nTop,
image.Picture.Graphic);    finally      image.Free;    end;  end;//
 else fotogrid.DefaultDrawCell(aCol, aRow, aRect, aState); end;    

This codes works as it should, except, the images are NOT scaled at
all.
1) I want to scale all images to a defined value. Decreasing size,
increasing size.
2) that image should be shown in a cell of the drawgrid.
3) Ratio between vertical and widht must be respected.

The code is functional and works except, no resizing at all !
doe somebody sees why not ?

When this is working I want to add a small panel, label beneath the
image so I can put a title in ?  Some body an idea for this ?

Thanks

----------------------------------------------------------------------
wp · 2018-12-19 14:46

The images are not scaled because you paint the image.Picture.Graphic
onto the canvas - this is the unscaled image, no matter whether you
change the properties Stretch, Proportional etc or not.

I don't know whether a TImage works at all if it does not have a
parent. But I would not use a TImage component at all. A simpler
TGraphic will do as well:

Here are the essential steps in the OnDrawCell event of the grid
(untested, high risk of typos here and there...):

Load the image in a TPicture:
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 var  pic:
TPicture;  R: TRect;  scaledHeight, scaledWidth: Integer;begin...  pic
:= TPicture.Create;  try    pic.LoadFromFile(<filename from DB>);
Calculate  image bounds so that the image is centered and fits into
the cell but keeps its aspect ratio (i.e. emulate what Image.Stretch,
.Proportional and .Center do).
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   if
pic.Width/pic.Height > cellWidth/cellHeight then begin    // image is
"wide" --> fit image width into cell    scaledHeight :=
round(pic.Width / pic.Height * cellHeight);    R.Left := aRect.Left; 
 R.Right := aRect.Right;    R.Top := (aRect.Top + aRect.Bottom -
scaledHeight) div 2;    R.Bottom := R.Top + scaledHeight;  end else
begin    // image is "high" --> fit image height into cell   
scaledWidth := round(pic.Height / pic.Width * cellWidth);    R.Top :=
aRect.Top;    R.Bottom := aRect.Bottom;    R.Left := (aRect.Left +
aRect.Right - scaledWidth) div 2;    R.Right := R.Left + scaledWidth; 
end;
StretchDraw the image in Pic.Graphic into the rectangle R
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  
cvs.StretchDraw(R, pic.Graphic);
Don't forget to clean up
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   finally 
 pic.Free;  end;

----------------------------------------------------------------------
WimVan · 2018-12-20 08:22

@wp

Thanks, now I understand the component TImage.  It is just a kind of
layer.
I changed Timage in my sources and used tPicture.  Saves a lot of
memory, saves a lot of time in run ..
I had to change some little logic to cange the images as it must, but
now it runs like a germ.
Pitty that the info about all graphics is not always clear.