How to reverse With Drag movement within a moving container

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.

1 Like