Pinch Zoom / Drag around view?

Post reply

❤Follow Topic(3)

0 favourites

6 posts

From the Asset Store

Touch (scroll, zoom, swipe)

$10 USD

All popular touch mechanics - scrolling, zooming, swiping

paradine

- part12studios
- - Joined 24 Dec, 2012
  - 233 topics • 1,236 posts
- 1
- 14 Dec, 2023
- Quote
Hi everyone, so I have an idea of how to do a zoom from this excellent capx example: construct.net/en/forum/construct-2/how-do-i-18/smooth-pinchzoom-137641

However this zooms in but this version lacks the ability for me to then drag / move around the zoomed in area.

I have some text that can be hard to read on smaller screens that I just wanted to allow folks to zoom in and read stuff.

Just the basic kind of behavior you'd expect on a normal website using a mobile device.

Thanks!

Caleb
Try Construct 3

Develop games in your browser. Powerful, performant & highly capable.
Try Now Construct 3 users don't see these ads

XHXIAIEIN
- Joined 26 Mar, 2016
- 29 topics • 190 posts
2

15 Dec, 2023
Quote

You can check this example.

#open=touch-zooming

---

If you want it to be bound to the the viewport, you can add this section

{"is-c3-clipboard-data":true,"type":"events","items":[{"eventType":"comment","text":"Viewport"},{"eventType":"variable","name":"boundLeft","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundRight","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundTop","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"boundBottom","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"comment","text":"ZoomScale"},{"eventType":"variable","name":"UseWidthScale","type":"boolean","initialValue":"false","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"WidthScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"HeightScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"minZoomScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"variable","name":"maxZoomScale","type":"number","initialValue":"0","comment":"","isStatic":false,"isConstant":false},{"eventType":"block","conditions":[{"id":"on-start-of-layout","objectClass":"System"}],"actions":[{"type":"comment","text":"Viewport Bound"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundLeft","value":"(ViewportLeft(\"UI\") + ViewportMidX(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundRight","value":"LayoutWidth - (ViewportRight(\"UI\") -ViewportMidX(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundTop","value":"(ViewportMidY(\"UI\") - ViewportTop(\"UI\")) / LayoutScale"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"boundBottom","value":"LayoutHeight - (ViewportBottom(\"UI\") - ViewportMidY(\"UI\")) / LayoutScale"}},{"type":"comment","text":"Viewport Aspect Ratio"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"WidthScale","value":"ViewportWidth(\"UI\") / LayoutWidth"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"HeightScale","value":"ViewportHeight(\"UI\") / LayoutHeight"}},{"type":"comment","text":"Zoom Scale"},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"minZoomScale","value":"UseWidthScale ? max(WidthScale, HeightScale) : min(WidthScale, HeightScale)"}},{"id":"set-eventvar-value","objectClass":"System","parameters":{"variable":"maxZoomScale","value":"minZoomScale * 3"}}]}]}

Used:

clamp(scrollx, boundLeft, boundRight)
clamp(scrolly, boundTop, boundBottom)
clamp(LayoutScale, minZoomScale, maxZoomScale)

And uncheck the Unbounded scrolling property

- part12studios
- - Joined 24 Dec, 2012
  - 233 topics • 1,236 posts
- 1
- 15 Dec, 2023
- Quote
awesome! I'll test this out today!

Sincerely,

Caleb
- part12studios
- - Joined 24 Dec, 2012
  - 233 topics • 1,236 posts
- 1
- 19 Dec, 2023
- Quote
XHXIAIEIN
I spent some time on this and while your added stuff about zoom in / out limits. Is your example suppose to also allow me to drag around the zoomed in area? That is the last of three checkboxes.. two were nailed for sure..

- pinch/zoom

- limit how far in / out they can go

- allow dragging inside zoomed area (not working for me) no drag at all

8bitwidgets.com/test/zoomtest
- XHXIAIEIN
- - Joined 26 Mar, 2016
  - 29 topics • 190 posts
- 2
- 20 Dec, 2023
- Quote
I upload a example

cdn.discordapp.com/attachments/225550155531812865/1185064638606487673/pan-zoom-view.c3p
- part12studios
- - Joined 24 Dec, 2012
  - 233 topics • 1,236 posts
- 1
- 20 Dec, 2023
- Quote
you are freakin' amazing! :) man how do you know how to do this? I've used construct for years and i just get amazed at how involved some of these solutions are that i never touch when I make stuff.