How to reverse With Drag movement within a moving container

#1

Hi all!

I’m a bit stumped on this one…I’m trying simulate dragging a magnifying glass across an image with something I’m calling the Inspector. But, using the “With Drag” action, the image inside the Inspector moves in the opposite direction from what is intended.

In the attached file, you’ll be able to click Inspector and see a box appear that can be dragged across the image. This is the Inspector who’s image I want to move left when dragged left.

Is there a way to reverse the direction of With Drag? Or maybe there’s another approach?

Any ideas would be much-appreciated!

https://mqt20m.axshare.com

Prototype forum.rp (6.3 MB)

#2

Hi!

Actually, yes you can reverse it. There are two “Cursor” properties called DragX and DrayY. These are distances that drag has moved since the previous OnDrag event. The faster you drag, the larger these distances get, because at a steady OnDrag “frame-rate” the dragged object moves further per frame.

In fact…

Move (This) with drag

…is identical to…

Move (This) by DragX , DragY

To go the opposite direction on drag, you just make those negative. In your case, the magnified view is 5 times bigger than the full view, so you’d say:

Move (This) by -DragX * 5 , -DragY * 5

To make it fully proper, you’d need some math to set the larger map’s initial position in the magnifier based on where exactly the magnifier is on the larger map. And once you figure out how to do that, you could solve the whole thing in OnMove of the magnifying glass, and have the drag code be just for dragging. That is a better solution.

But for quick and dirty, do the above! It looks great in your prototype. The tricky part is finding that initial position.

#3

Fantastic, thank you! Super easy solution.

I am fascinated with the proper solution as well and will likely have to cross that bridge if I want to change the magnification of the main image and have it reflected in the magnifier.

Thanks again!

#4

The OnMove solution looks like the this, where LV_map is a local variable pointing to the non-zoomed map image. Note that This refers to the magnifying glass (I’ll call that MG), and Target refers to the zoomed image. (Note that it’s easiest if the MG and the non-zoomed map are both inside of a dynamic panel, because then the MG’s X and Y values will both be 0 when in upper-left corner of map.)

On Move (of the MG)
  Move zoomedImage to [[ This.x / (LV_map.width - This.width) *  -(Target.width - This.width) ]] , [[ This.y / (LV_map.height - This.height) *  -(Target.height - This.height) ]]

Breaking down just the expression for the X position:

This.x / (LV_map.width - This.width)

The above produces a value between zero and one: zero when the MG is all the way left and one when the MG is all the way right. Here’s why:

The part in parentheses is the maximum distance that the MG (This) can travel within the bounds of the map. Let’s pretend that’s 1000px, because the MG is 200px wide and the map is 1200px wide. When the MG is at far-left, This.x is 0, so the whole expression is 0/1000, which is zero. When the MG is at far-right, This.x is 1000, and 1000/1000 is 1. When it’s half-way, This.x is 500, and 500/1000 is .5

 * -(Target.width - This.width)

This is the maximum distance (negative) that the zoomed image (Target) can travel within the MG (This). Let’s say that’s -5000px because the zoomed image is 5200px wide. When the prior expression above resolves to 0, The zoomed image’s X position will be at 0; when the prior expression is 1, The zoomed image’s X position is -5000, leaving it’s last 200px visible in the 200px-wide MG.

Here’s a sample:

Preview

File: zoomed-inset.rp (1.5 MB)

[Edit] If you are iffy on how This, Target, and local variables are used, look at this post.