Drag a Canvas larger than the device screen

1,365 views
Skip to first unread message

Scott Ferguson

unread,
Oct 16, 2015, 6:38:04 PM10/16/15
to App Inventor Developers Library
This is part of a work in progress for a user on the MIT App Inventor forum.
But it is develped enough to demonstrate that a Canvas can be dragged.
Also shown is how the Canvas can be both wider than and taller than the device screen.

The nesting of the Canvas inside a set of screen arrangements as follows allows the Canvas to be positioned exactly:

A vertical screen arrangement is a container for...
    A vertical screen arrangment that acts as a spacer to move the Horizontal Arrangement below it up and down by adjusting the arrangment's Height
    A horizontal screen arrangment that contains:
        A horizontal Arrangement spacer that pushes the Canvas to it's right left and right by adjusting the arrangement's Width
        A Canvas

When the user drags a finger on the Canvas, the Canvas Dragged event block uses the prevX, prevY and currentX, currentY values to adjust the screen arrangement width and height spacers and move the Canvas.



To test the dragging feature, touch the (+)--  magnifying glass on the main screen to zoom in, then drag the canvas.

Responsive sizing is used in this project as well.

---

sf

   
MapIndia_Floating.aia
Reply all
Reply to author
Forward
0 new messages