Scaling an ImageView using the slider control

Now we have created code to select an animated funny face and we have the ability to move our photograph image around by dragging and dropping, we need to be able to scale our photograph using a slider control and a new transformation.

In this recipe, we will hook up the event listener of our slider control and use another 2D Matrix transformation to change the scale of our imageViewMe control, based on the user input this time.

How to do it…

At the bottom of your current source code, you should have created a slider control called zoomSlider. We are going to replace that code with a slightly updated version and then capture the slider's change event in order to scale our imageViewMe component based on the value selected. Replace your declaration of the zoomSlider component with the following code:

var zoomSlider = Ti.UI.createSlider({
  left: 125,
  top: 8,
  height: 30,
  width: 180,
  minValue: 1,
  maxValue: 100,
  value: 50
});

//create the...