Resize canvas image

Getting Started
1

Hello,

The ImageViewer is very confusing because it’s described as something to show an image. I tried it and was happy to see that it resized the image when I resized the control. However, it has a border I can’t remove.

I found a post that said I should use a Canvas. But the Canvas doesn’t resize the (background) image. My need here is very common. Why isn’t there a resize option in the Canvas control?

How can I get this to work?

Thank you.

2

Hello @Ken on wich platform? macOS, windows, iOS, Android, Web ? Can you send screenshots?

3

I’m on Windows, expecting to publish both Mac/Win.

4

I created this Paint function, after making a Subclass of Canvas:

// In the Paint event of the Canvas
if Canvas1.RealImage = Nil then
  Canvas1.RealImage = Canvas1.Backdrop // Get the backdrop
  Canvas1.Backdrop = nil // And then remove it
end if

If Canvas1.RealImage <> Nil Then
  // Draw the image scaled to fit the Canvas
  g.DrawPicture(Canvas1.RealImage, 0, 0, Canvas1.Width, Canvas1.Height, 0, 0, Canvas1.RealImage.Width, Canvas1.RealImage.Height)
End If

This is extremely frustrating. If I set a breakpoint and step through the code, then the result works. I have to step to the point where Backdrop is set to nil. If I don’t do that, then it draws both the scaled version and the original-size Backdrop.

The code should be executing whether or not there is a breakpoint!

I’m using the latest Xojo (4.2) which I just installed today.

5

D
Stop using the Backdrop: the code is executed, but you cannot see until you set Backdrop to Nil (as you said).

Load the image from disp,
resize it in a Picture,
and in Paint, draw the Picture if not Nil.

Is it clear now ?

6

You don’t need the backdrop at all.

7

use this menu and make this RealImage visible in form designer.

grafik
grafik457×691 15.6 KB

a change of Backdrop could raise an paint event.

g.DrawPicture(Canvas1.RealImage, 0, 0, Canvas1.Width, Canvas1.Height, 0, 0, Canvas1.RealImage.Width, Canvas1.RealImage.Height)

should be

g.DrawPicture(Me.RealImage, 0, 0, g.Width, g.Height, 0, 0, Me.RealImage.Width, Me.RealImage.Height)
1 Like
8

That’s not clear at all. The backdrop is being set to nil every time, so I should never see it but it appears unless I walk through a breakpoint.

The behavior shouldn’t change because I step through it with the debugger.

9

Thanks! I’ll try that.

But what difference would Me make? It’s still the same object.

I’d like to know why the break point and stepping changes behavior. That seems like a bug to me.

10

let the backdrop nil in designer and in the inspector behavior make your picture property visible.
seems the backdrop is a computed property.

Canvas1.Width and g.Width

i would use the graphics context argument because you paint in this graphics.
and its better if you reuse the source code it not adress explicit a control.

there are other threads that show how to use correct picture ratio.

1 Like
11

I agree, just wanted to be sure there was no actual difference. Your post about Inspector Behavior solved the problem. I moved the image from Backdrop to RealImage, making Backdrop nil. Thanks again.

I’m just waiting to see if anyone can clarify the debug behavior, which still seems like a bug.

12

the paint event draws on top of the Backdrop.
this Backdrop = nil create a new paint event.

generally avoid generate the same event in a event.

correctly source code would be if xojo create a row that paint the backdrop in the paint event and we can do what we like to do with it.
i added a feature request that we can visualize the backdrop self.

1 Like
13

Interesting. Thanks for the insight!