Question

我是famo.us的新手，我正试图在拖动时缩放图像。我的代码工作正常，因为它无效。如何让它在每次阻力下都能正常工作？ setTransform是否使比例操作固定？

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)
  );
});

});

Answer 1

您需要做的就是更改使用缩放功能的方式。你正在缩放你的＆＃39; z＆＃39;属性为0.应为1。

所以改变这个..

Transform.scale(scale_x,scale_y, 0);

对此..

Transform.scale(scale_x,scale_y, 1);

祝你好运！

使用famo.us在拖动时缩放图像

1 个答案: