Draw on top of an ImageSprite or Ball on a Canvas

The problem that I am facing is it appears no lines or circles can be drawn on top of an ImageSprite

Screen Shot 2021-12-01 at 8.27.21 AM

No matter the z index of the ImageSprite . . .

Screen Shot 2021-12-01 at 8.28.13 AM

Does anyone have a solution to this problem?

You can only draw on the background of the canvas not on a sprite. If you want to do that you have to save the canvas with sprite and all and then load it again so you can draw on it.

3 Likes

With a little bit of work, and an extension you can achieve what you want (although moving the image sprite takes a bit more work).

Get the relativeView extension

In Designer, drag out a vertical arrangement
Place a canvas inside it (set size to 200x200 - for example), with an image sprite, set your image
Place a second canvas on the screen (not in the vertical arrangement). Set size to 200x200. Set background colour to None or with opacity so that you can see through it.

These blocks on screen initialise

image

What should happen is that the second canvas is placed over the first canvas, and you can still see what is on the first canvas. You draw on the second canvas. You can move the second canvas by changing its gravity.

image

You can use the visibility setting of each canvas to hide and show the canvases. This allows user to move the image around in the underlying canvas

5 Likes

Hello Joseph

Can you tell us the goal of your App? Why does it require the User to draw on a sprite? Could having a collection of predefined sprites for the User to select from be acceptable?

1 Like

Thanks for the information TIMAI2, I'll make use of this in my projects.

I'm currently developing a painting app which allows the user to import a photo from their gallery or camera and draw on it, while also having the ability to move the image around, rotate it, and have multiple images on one canvas. The goal of the app is meant to be a demonstration of my abilities in MIT App Inventor and for learning.

The user should be able to draw on the images they insert, and not just on the canvas behind the image, because it would otherwise be an inconvenient experience.

As for predefined sprites I do plan on implementing something like this in the future.

If you put the canvases in the same vertical arrangement on top of each other you can use this extension to save the image of both canvases together.

3 Likes

I see - of the methods offered, perhaps the most difficult bit is loading the image for use with a sprite at runtime.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.