Creating the GUI

Put on Window 3x PushButton controls (open image, crop image, 50% size) and activate for each LockBottom and LockRight property. Add a CheckBox control (fit to canvas) and activate LockBottom and LockLeft property. On finish insert on Window Canvas control and lock it to bottom, left, right and top.

Load image from file to Canvas

Double click on PushButton1 (Open image) and use this code to select and load a image to canvas. As you can see in this example we give as a option to load only a PNG file format. Of course it can be changed to other formats like JPG or BMP. Add now two New Properties – Declaration f As FolderItem and Declaration p As Picture.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Dim pngType As New FileType
 
pngType.Name = "image/png"
pngType.MacType = "PNG "
pngType.Extensions = "png"
 
f =GetOpenFolderItem(pngType)
 
if f  < > Nil then // f various Nil
   p = f.OpenAsPicture  // load file to memory
   Canvas1.Backdrop = p // load image from memory to canvas
 else
    //User Cancelled
end if

Crop image

Double click on PushButton2 (Crop image) control and fill the free space with code available below. We will now crop the full image size to 100×100 by position x = 0 y = 0. The effect – we will simply crop the left top corner of our picture. If you like you can make for example a control to select a specify region of image to crop it.

1
2
3
4
5
6
7

Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,100,100,0,0,100,100)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1

50% scaled image

Double click on PushButton3 (50% Size). When the user will click on this button he will see on Canvas control scaled image by 50%. We get this effect by changing picture width and picture height to 1/2 using * 0.5.

1
2
3
4
5
6
7

Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,p.Width * 0.5 ,p.Height * 0.5,0,0,p.Width,p.Height)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1

Image fit to Canvas

Our CheckBox1 control will be responsible for auto fitting the picture into Canvas. Add to Window1 Event Handlers Sub Resizing () our code. Now if our CheckBox1 i checked then when the user will resize the Window the image will allways fil into canvas in real time. You can also add this kind of code to CheckBox1 Sub Action () so the effect will be visible immediately when the user will click on this control.

1
2
3
4
5
6
7
8
9
10
11
12

if CheckBox1.value then
 
Canvas1.Refresh
 
p = New Picture (p.Width,p.Height,32) //creating new picture (width, height, depth)
 
p.Graphics.DrawPicture(f.OpenAsPicture,0,0,Canvas1.Width,Canvas1.Height,0,0,p.Width,p.Height)
 
Canvas1.Backdrop = p // loading the picture from memory to Canvas1
 
 else
end if

Graphics.DrawPicture

The last thing that we will learn in this tutorial is getting know what is going on in Picture.Graphics.DrawPicture. So, we have got here few parameters in Graphics.DrawPicture (image, image x position on canvas, image y position on canvas, picture width to display, picture height to display, x position inside picture displayed on canvas, y position inside picture displayed on canvas, picture width to manipulate, picture height to manipulate). I hope that when you have not understand what is going on in p.Graphics.DrawPicture now it is clear.

Download