Snapshot Canvas

I've looked for a simple explanation to implement this feature but can't find a demo of how this would work.

When initiated, where does the captured image go and how would I call it?

Here's what I'm looking to do:

Objective: Switch from Layout 1 to Layout 2 with a slide transition.

• on click capture image snapshot of Layout 1
• take Layer 1 snapshot and overlay on Layout 2
• switch to Layout 2
• slide Layout 1 image (sprite) to reveal Layer 2.

Ideas?

I made an example some time ago but using the Canvas plugin instead of the snapshot feature:

Swipe Layouts Example

I guess it's also possible to do it taking a snapshot and dynamically loading it into a sprite, but I haven't tried yet.

Interesting. This is pretty much exactly what I wanted to do <img src="smileys/smiley32.gif" border="0" align="middle" />

It would also be doubly interesting to see if the native snapshot canvas could work it.

Excellent example btw!

The 'snapshot canvas' action calls 'on canvas snapshot' a moment later, at which point the system expression (IIRC 'CanvasSnapshot') has the JSON data of the image which can then be loaded in to a sprite or whatever.

I adapted my example to use only the snapshot feature without the Canvas plugin, works the same:

Swipe Layouts 2 (no Canvas)

This is great! Looking through the code, it looked like a drop in replacement (almost). :D

Exported this to CocoonJS and while it worked great in iOS, it didn't work on android. For some reason it's not responding to touch commands. Although on PC it works fine.

bon4ire : if I remember well there's no "toDataURL()" (necessary for the "take snapshot" action to occur.

Ashley : did you worked around that on Android ? I know there's a polyfill for Android : http://code.google.com/p/todataurl-png-js/

Did you already used it ?

I've included a capx of what I'm currently having a problem with right now.

https://www.dropbox.com/s/vd4inmjr9lc1oen/TapSlideProblem.capx

Drag any of the flowers around with your mouse and click the green box. A snapshot is taken and it slides to the left.

While this works when fullscreen is off, it doesn't work properly when fullscreen is set to Scale. Why? If you move the flowers around and reclick, it doesn't update CanvasSnapshot.

Also, in the scale mode, the sprite size shrinks and overlays the previous snapshot. Not sure what's going on. Is there a way to clear CanvasSnapshot before retaking?

It doesn't work when scaling is enabled because although the sprite is the size of the window, because the display is scaled it is resized and no longer appears to be the size of the window.

This is a little tricky to solve - you need to resize the sprite larger by the amount the layer has been scaled. TBH, canvas snapshotting wasn't really designed with this in mind.

Actually, I found a way to fix it. You need to position and size the sprite in terms of the viewport, rather than the window size. You should get in the habit of always using the viewport expressions (ViewportLeft, ViewportTop, ViewportRight, ViewportBottom) rather than the window size expressions because the window size is kind of irrelevant when the display has been scaled.

https://dl.dropbox.com/u/15217362/FixedCanvasSnapshot.capx

After changing the last code to Viewport it worked perfectly! Wow, thanks Ashley!

<img src="smileys/smiley20.gif" border="0" align="middle" /><img src="smileys/smiley20.gif" border="0" align="middle" /><img src="smileys/smiley20.gif" border="0" align="middle" />

My last question is how to reset CanvasSnapshot to clear? When I reposition the flowers and take another snapshot it uses the old snapshot and not the updated one.

Ok. I was able to clear the snapshot by spawning and destroying the sprite from a dummy sprite.

TapSlideFixedB

Every now and then I get a black empty capture though.

I made an example some time ago but using the Canvas plugin instead of the snapshot feature:

Swipe Layouts Example

I guess it's also possible to do it taking a snapshot and dynamically loading it into a sprite, but I haven't tried yet.

Anyway to make it work when the fullscreen setttings is set to Scale or Integer Scale , because it seems to break the sliding as it seems to slide only to a certain level only and also cocoonJS launcher atleast requires some form of fullscreen settings like the the scale or crop.

Please advise as i needed it urgent for another project.

Exactly what i wanted to do! Thank you!! <img src="smileys/smiley20.gif" border="0" align="middle" />

Can I go to Random Layout with Swipe Style?