KineticJS transitionTo scale

Я работаю над проектом холста в Kinetic JS. Я хотел бы знать, есть ли способ изменить масштаб объекта в методе transitionTo. Ниже представлена ​​упрощенная версия моего кода. Я понимаю, что вы можете сделать это с помощью метода анимации, но по причинам, для объяснения которых потребуется много времени, я не хочу делать это таким образом.

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 1600,
        height: 1200
    });

        var layer = new Kinetic.Layer();
        var book = new Image();
    book.onload = function () {
        bookImg = new Kinetic.Image ({ x: 800, y: 680, image:book, name:book, offset: [85.5, 106], opacity: 0,});

        layer.add(bookImg);
        stage.add(layer);
    }
book.src = "images/book.png";

    setTimeout(function() {
       bookImg.transitionTo({ x: 800, y: 680, opacity: 1, duration: 4, });
    }, 1000);



};

Итак, при этом переходе к я хочу изменить масштаб объекта. Так что исходный масштаб должен быть примерно от 0,5 до 1. Однако я не могу найти никакой документации, которая могла бы помочь.

Есть предположения?


canvas html kineticjs
person user1498426    schedule 25.09.2012    source источник
comment
Использование шкалы: [0,5,0,5], а затем шкалы: [1,1] не работает.   -  person user1498426    schedule 25.09.2012

Ответы (1)


arrow_upward
3
arrow_downward

Используйте свойство scale, чтобы изменить его с:

bookImg = new Kinetic.Image({
   x: 100,
   y: 110,
   image: book,
   name: book,
   offset: [85.5, 106],
   opacity: 0,
   scale: { x:0.5, y:0.5 }

});

to:

bookImg.transitionTo({
   x: 100,
   y: 110,
   opacity: 1,
   duration: 4,
   scale: { x:1, y:1 }

});

Вы можете увидеть, как он работает здесь

person jbalsas    schedule 25.09.2012
comment
Ах, я вижу, я упустил x: и y: попробую - person user1498426; 25.09.2012
comment
+1, хотя, чтобы избежать путаницы, x и y здесь не требуются. Вот обновление jsfiddle: jsfiddle.net/vMkfK - person Eric Rowell; 28.09.2012