Reality Check on Using Canvas and Image Sprites

I had a plan to use an image of a grid, with each grid square containing a picture, and assign this to an image sprite

like this:

The idea then was that when a user clicked on a grid square image, the canvas would resize to the dimensions of the grid square, but three times the size, and the coordinates of the image sprite would be moved to display only the image that was clicked (sprite image also zoomed up in size)

Like this

Seems you are able to set this up in designer, but not with blocks (as above)

But image sprites can't have minus co-ordinates, and can't be bigger than the canvas, correct?

My only solution seems to have individual images that are assigned to the image sprite after selecting?

Hope this makes sense....

--

If it helps: a canvas can be bigger than the screen.

--

Yes, that would work if i wanted to zoom to fullscreen size. Might be a work around.

Can canvas be bigger than an arrangement?

--

No, but the arrangement can zoom, depending on the contents and if sizes are set to auto.
Maybe you can explain again what exactly you want do do, because I did not understand it.

--

 canvas can be bigger than the screen.

Scott made loads of examples about that, see here: search for canvas scroll

--

The canvas can be bigger than the arrangement it is in !!  (thus behaves in the same way as when canvas is just on Screen1)

In a test I have a big picture scrolling in all four directions :)

What is the code to move the image around with touch/drag, my simple efforts make the image start off bottom left? So if image is centred how to move it around with touch/drag from its current position ?

I'll need to go away and do some maths and block building, then hopefully come back with a solution to my initial query about zooming/resizing.

--

Woohoo! Think I have cracked it!

The canvas needs a timer for the image sprite, in order to give it (the canvas), enough time to resize before the image sprite resizes.

Blocks below and aia attached. Sorry about the image quality of the grid, but this is just proof of concept.

Would welcome any improvements to the blocks, especially for the if procedure.

CommsCanvas2.aia

--

Tidied up a bit, used an if statement in clock so didn't need second clock

Also tested for odd/even to reduce number of blocks, and included an OR statement in the PositionGrid procedure

Am sure if I thought long and hard enough I could come up with a single equation!

--
Also come up with an answer to my other question:

What is the code to move the image around with touch/drag, my simple efforts make the image start off bottom left? So if image is centred how to move it around with touch/drag from its current position ?

Just about calculating the difference between the original x & y values and the touch position for start and current x& y values

Movement is a bit clunky, might be better with a larger image, or is perhaps using the easing approach ?

Anyway, blocks, image and aia to play with

PanTest.aia

Coming next zooming image inside an arrangment!

--

Zoom Test

A bit buggy this and seems there are limitations. can't get a canvas bigger than @ 3000 pixels, app just crashes.

Additional blocks used to create Zoom, otherwise same as PanTest app

ZoomTest.aia

All suggestions and ideas welcome :)

--

I tried your ZoomTest and unfortunately it crashes quite easily. If you choose zoom 2x and then zoom 1.5 (or the other way around) then the Companion stops.
I also think your dragging is a bit too complicated. I just did a similar set of blocks for someone in the forum. Screenshot attached.

--

Thanks Ghica I'll give it a go.

Methinks the crashing maybe due to timing, more clocks required perhaps? Will look into it.

--

Much smoother moving around, but on every touch the image is returned to the centre position. Needs review of x/y position on next touch.

Working on it.

--