0

I am new to famo.us, I am trying to scale image on dragging.My code is working fine for one drag after that its not working. How can I make it work fro every drag? Does setTransform make the scale operation fixed?

define(function(require, exports, module) {
var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var StateModifier       = require("famous/modifiers/StateModifier");
var Draggable           = require("famous/modifiers/Draggable");
var Transform           = require("famous/core/Transform");
var ImageSurface        = require('famous/surfaces/ImageSurface');
var mainContext = Engine.createContext();
var size_x = 200;
var size_y = 200;
var scale_x =1;
var scale_y =1;
var surface = new ImageSurface({
  size: [size_x, size_y],
  content: 'img/1.jpg',
  properties: {
    backgroundColor: 'rgba(200, 200, 200, 0.5)',
    cursor: 'pointer'
  }
});
var draggable = new Draggable({
  xRange: [-100, 1000],
  yRange: [-100, 1000]
});
surface.pipe(draggable);
var mod = new StateModifier({
  transform: Transform.translate(150, 100, 0)
});
var mod1 = new StateModifier({
 });
mainContext.add(mod).add(mod1).add(surface);
draggable.on('update',function(data){
  var delta = draggable.getPosition();
  var scale_x = (size_x+ delta[0])/size_x;
  var scale_y = (size_y+ delta[1])/size_y;
  mod1.setTransform(
  Transform.scale(scale_x,scale_y, 0)
  );
});

});
user3706836
  • 13
  • 4

1 Answers1

2

All you need to do is change how you are using the scale function. You are scaling your 'z' property to 0. It should be 1.

So change this..

Transform.scale(scale_x,scale_y, 0);

To this..

Transform.scale(scale_x,scale_y, 1);

Good Luck!

johntraver
  • 3,612
  • 18
  • 17