ImageLibEx Question

linum

Active Member
Licensed User
I'm using the ImageLibEx to draw but I need help with the following...

I want to be able to draw inside an area the size of Width: 320 Height: 50 and not anywhere else outside that area...

Also, I want to save the image but I want to save it in that size (320 x 50).



I experimented with ImageLibEx and I was able to draw (using DrawerEx) and save (using BitmapEx), but it saves it to the size of the form.

I did notice the manual said:

DrawerEx.New2 - Initializes the Drawer object. New2 is used to draw on an image or bitmap.The image can be any image including images stored in ImageList, Image, Control, Forms, Bitmaps or BitmapEx objects.

Does this mean I can create an empty image Control, size it to 320 x 50 and use DrawerEx.New2 to draw on it? If so, What is the correct syntax? I keep getting a "Value cannot be null" error if I have an image control named "Image1" and if I use:

B4X:
DrawerEx.New2("Image1")


Also, how do I save that image once it's working?

Thank you;




linum
 

agraham

Expert
Licensed User
Longtime User
You don't draw on an Image control you draw on the image stored in an Image control, which is a Bitmap or BitmapEx. You don't need to use an Image control unless you want to see what you are drawing. The size of the Image control is independent of the size of the bitmap, the Image control Mode property determines how the bitmap is displayed. So do something like this -

B4X:
BitmapEx.New2(320, 50)
Image1.Image = BitmapEx.Value ' if you want to see it
DrawerEx.New2(Image1.Image) ' one way
DrawerEx.New2(BitmapEx.Value) ' does the same thing
  ...
draw away
  ...
BitmapEx.SaveImage("somewhere", "J")
 

linum

Active Member
Licensed User
Thank you so much for your excellent help. It's still not working for me. I can't see what I'm drawing and it saves a complete Black picture.

Here's a demo so you can see it.


Thank you for your patience;




linum
 

Attachments

  • Sample.zip
    1.5 KB · Views: 167
Last edited:

agraham

Expert
Licensed User
Longtime User
Your Image1.Visible pproperty is false so you can't see it. I don't think you need a Flood object, you clear a bitmap with DrawerEx.Clear(colour). Once the Image is visible you don't get the mouse move events on the form where the Image is and Image does not report mouse movements so I am afraid you will need to rethink this.

@Klaus - this is more up your street than mine :)
 

linum

Active Member
Licensed User
Thank you for your input. I will probably go back to the simple method of saving the image from form and I'll look to see if I can crop it somehow to the desired size.



Thank you;



linum
 

agraham

Expert
Licensed User
Longtime User
I'll look to see if I can crop it somehow to the desired size.
Use DrawerEx.DrawImage to copy from the Form image to a BitmapEx of the required size then save the Bitmap. You will probably want the source and destination rectangles to be the same size but they don't have to be. DrawImage will scale the result if required.
 

klaus

Expert
Licensed User
Longtime User
Here you are.

The program defines:
- bmpImage a bitmap of 320 * 50
- drwImage a drawer attached to this bitmap
- drwSign a drawer attached to the form allowing to draw the image onto the form
- a screen area on the form with the same size as the bitmap.

The program draws with drwImage onto a bitmap bmpImage , and with drwSign.DrawImage the bitmap is drawn onto the form.
The bitmap can be saved as you did it.

Best regards.
 

Attachments

  • Curlys2.sbp
    2.5 KB · Views: 158
Last edited:

klaus

Expert
Licensed User
Longtime User
I was thinking about the line width, with a value of 1 the signature could look somewhat thin.

Here is a version with the choice of the line widht (in the source code).
To make the lines look nicer the program draws a circle at the beginning and the ends of the lines.

Best regards.
 

linum

Active Member
Licensed User
One Last Question...


How can I move the signature area down further? I tried modifying the code but I just can't seem to get it.

Here's the attached file so you can see where I need it.


Thank you so much for all your help...
 
Last edited:

klaus

Expert
Licensed User
Longtime User
Here you are.
The difference is the following:
- the coordinates of the upper left corner of the drawer are 0, 0
- the coordinates of the upper left corner of the area on the form are ScrennX, ScreenY.
To draw onto the drawer you must subtract ScreenX and ScreenY from the mouse coordinates!

B4X:
[FONT=Courier New][SIZE=2][COLOR=#0000ff]
[SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]frmSign_MouseDown (x,y)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]bMouse = [/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]True[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]x1 = X - ScreenX[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]y1 = Y - ScreenY [/FONT][/SIZE]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#0000ff]
[SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]frmSign_MouseMove (x,y) [/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff] If[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] bMouse [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Then[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New]   x2 = X - ScreenX[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]   y2 = Y - ScreenY[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]   drwImage.DrawLine(pen1.Value,x1, y1, x2, y2) [/FONT][/SIZE]
[SIZE=2][FONT=Courier New]   UpdateImage[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]   x1 = x2 [/FONT][/SIZE]
[SIZE=2][FONT=Courier New]   y1 = y2 [/FONT][/SIZE]
[/FONT][/SIZE][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff] End [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]If[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Best regards.
 
Top