How to simulate image cropping (zoom in/zoom out effect)?

Axure RP 8
1

Hello, I was wondering if anyone knows how to simulate zooming in and out of an image to be able to crop it. I’m able to get something working when I zoom in, but I can’t get it to go back to it’s original size when it zooms out.

I was looking to do something similar to croppie except I want the area that is being cropped out to not show.

Any advice would be great, thanks.

image-editing.rp (258.5 KB)

2

Hi!

To get this to work you’ll need to convert the slider’s position into a number between 1 and the desired maximum magnification value, and then use that number for the amount to zoom. I’ve provided a sample file. (By the way, when you’re done with this, you’ll have a handy slider that you can use for many other prototypes.)

Setup:

Create five labels that you’ll use to store values. (I don’t like using global variables for things like this, because then you can’t copy and paste this slider to another file without remembering to create the global variables in the other file first.)

  • sliderMin: the minimum value for the slider. This is set to 1, so the magnification starts at 1x
  • sliderMax: the maximum value for the slider. I set this to 3 for 3x magnification
  • sliderProgress: this we’ll update with the current value of the slider, so it will hold a value between sliderMin and sliderMax, depending on the x position of the slider handle.
  • photoOrigWidth: the original width of the image
  • photoOrigHeight: the original height of the image

You’ll also want to ungroup the slider group and put the slider track and the slider handle into a dynamic panel. This is handy, as DPs have their own coordinate system, so for the slider track, x will now be 0 no matter where the DP is on the page, which will make the math easier. (You can now use “Greater than or equal to 0” as your left drag boundary if you wish.) I also put the label widgets listed above into this panel. You can size the panel down to hide them.

By the way, the local variables photoOrigWidth and photoOrigHeight are set OnLoad of this dynamic panel. (Or you can hard-code them.)

Add the following command to OnDrag of the slider handle.

set sliderProgress to (value) [[ This.x / (LVAR_sliderTrack.width - This.width) * (LVAR_sliderMax - LVAR_sliderMin) +  LVAR_sliderMin ]]

LVAR_sliderMin and LVAR_sliderMax are local variables referring to the text of their associated labels, and LVAR_sliderTrack is a local variable referring to the track widget (line).

Let’s break down the expression above.

First, the handle’s x position (This.x) is divided by the total distance it can travel (LVAR_sliderTrack.width - This.width) to give us a value between 0 and 1.

Why does this work? Let’s say the total distance that the handle can travel (the track’s width minus the handle’s width) is 100px. When the slider handle is fully to the right, its x value will be 100, and 100/100 = 1. If the handle is halfway down the track, x = 50, and 50/100 is 0.5. Fully to the left it’s 0/100, or 0. And so on. It doesn’t matter how wide or narrow the track is: the result will be the same.

Then the expression multiples this 0-to-1 value by sliderMax minus sliderMin (the value range of the slider) and adds sliderMin to make the slider’s value start at sliderMin.

Let’s plug some values into the expression above:

  • sliderMin = 0, sliderMax = 10: 0-to-1 * (10 - 0) + 0. The slider will have value range of 10 and start at 0
  • sliderMin = 5, sliderMax = 10: 0-to-1 * (10 - 5) + 5. The slider will have value range of 5 and start at 5

Then to size the photo you simply multiply the original width and height by the slider value.

width:   [[ LVAR_photoOrigWidth * LVAR_sliderProgress ]]
height:  [[ LVAR_photoOrigHeight * LVAR_sliderProgress ]]

Preview

Modified file: zoom_image.rp (265.4 KB)

3 Likes
3

Worked perfectly, thank you!

4

Is there a way to also pan after zoom?
so its zoom and pan?

5

Is there a way “zoom out”? So the slider starts in the middle of the line. When I move left it zooms out and when I move right it zooms in… :open_mouth: