Basic Canvas question

MIT App Inventor Help
1

I can’t believe I am asking such fundamental questions about BackgroundImage on a Canvas (and I searched for the answer here and in general).

  • Without setting height and width on a Canvas (both automatic), does the Canvas take on the dimensions of the BackgroundImage?
  • Can the height and width on a Canvas be set (automatic or percentage) in such a way that the BackgroundImage maintains its aspect ratio? (I can’t seem to find a way.)
  • In the absence of that, is it possible to find the dimensions of an item (image) in the Media drawer?

It seems that the best (only?) way to manage this is to encode any image dimensions (or aspect rations) in the code. Am I missing something? Thanks.

  • dcp
2
  • Without setting height and width on a Canvas (both automatic), does the Canvas take on the dimensions of the BackgroundImage?

Yes (caveat - only if it fits inside the screen)

  • Can the height and width on a Canvas be set (automatic or percentage) in such a way that the BackgroundImage maintains its aspect ratio? (I can’t seem to find a way.)

Set to Automatic

  • In the absence of that, is it possible to find the dimensions of an item (image) in the Media drawer?

Once image is set to canvas, get the width and height of the canvas, from there you can work out the aspect. (There are also extensions that can provide image dimensions to you. Look for Image and Image Metadata by Taifun)

blocksImgDim

Output: W= 310 H= 450 Aspect= 0.68889

(Once you have the aspect ratio you can resize to suit (if you need to))

1 Like
3

You can use an image component , with scaling set to 0 (fit), to get the aspect ratio, then set the size of the canvas to match the dimensions

blocksImgDim2

Output: W= 411 H= 231 Aspect= 1.77922

(W = screen width)

1 Like
4

Thanks @TIMAI2…

I used the technique you suggested — both with background images in a Canvas & an Image. Based on others’ posts, it seems clear that, when changing images of different sizes (and wishing, as you suggest, to set the Canvas / Image dimensions based on the relative .Picture dimensions and screen dimensions), the sizes do not immediately update, but rather ‘take a second.’ I tried this technique with a Canvas & an Image. The code for the Image version is here:

Image
Image600×600 70.3 KB

Sample outputs are:

image-100x100.png 199 199 image-100x100.png 99 99
image-200x200.png 99 99 image-200x200.png 199 199

The moral of the story (for me) is: make sure background images changed under programmatic control are the same size. (I would hate to have to use a Clock to ‘wait a sec’ for the dimensions to properly update!)

– dcp

5

Nothing wrong with using a clock to do this, often it really does help :slight_smile:

2 Likes
6

I always use a clock at the app initialize event to set everything in the right place.
250 milliseconds (1/4 of a second) seems to work fine in most devices, but probably a little less is OK too.

1 Like
7

My ImageSize sample app.

– dcp