PictureBox drawing order question

1

Hello, I am using PictureBox in an App. The order of drawing is not working to allow me to see draw items on top of a picture.

In the App i am drawing a base map (JPG), then i want to draw some lines and boxes on top of the map. The map always ends up on “top” and the drawing items go to the background and are covered by the JPG. It doesn’t matter the order the drawing statements are done in the subroutine, the map is always on top.

I saw that there is an option parameter globalCompositeOperation, with a bunch of different options on the order of how items are drawn. Tried, them all, none worked.

So the code looks like:

Sub Drawmap
   ....
   pb.addImage("composite fishing map.jpg",dispx,dispy)
   pb.strokeRect(150,150,10,10)
   ....
end Sub

the order of statements for addimage works as expected, the last addimage is on top of the display.

thanks for any help!

2

AppStudio PictureBox is a wrapper for the HTML Canvas element, so it work pretty much the same way.

The addImage() function is an enhanced Canvas drawImage. It could be that since images take longer to draw, the lines complete first.

I don’t have an answer for your case, but globalCompositeOperation still looks promising.

3

I can’t come up with a way to make it work. Even if you take the basic Picturebox sample project with Mario and the red circle, it is not possible to make the red circle draw on top of the mario image, with one exception:

if you set globalCompositeOperation=“destination-over”, and reverse the drawing order to
draw circle
addimage “mario.jpg”

then the circle draws on top of mario.

But the problem is i am moving the map as part of GPS locating, so any updates of the map location get drawn “under” the first map. Which isn’t workable.

4

Can you clear the PictureBox and redraw everything?

5

I’ll give it a try.