Масштаб содержимого контейнера весь розыгрыш

Question

Смотрите скрипку для тестового кода: https://fiddle.sencha.com/#fiddle/1jro или код ниже:

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 
     var container = new Ext.draw.Container({ 
      renderTo: Ext.getBody(), 
      width: 400, 
      height: 300 
     }); 

     var surf = container.getSurface(); 

     var s1 = surf.add({ 
      type: 'rect', 
      x: 50, y: 10, width: 300, height: 80, radius: 50, 
      fillStyle: '#ff0000', strokeStyle: 'black' 
     }); 
     var s2 = surf.add({ 
      type: 'path', path: 'M 50, 110 l 100 80 l 100 -80 l 100 80', 
      fillStyle: '#00ff00', strokeStyle: 'black' 
     }); 
     var s3 = surf.add({ 
      type: 'rect', 
      x: 50, y: 210, width: 300, height: 80, radius: 50, 
      fillStyle: '#0000ff', strokeStyle: 'black' 
     }); 

     container.renderFrame(); 

     // Resize (halve x and y) 
     setTimeout(function() { 
      container.setSize(200, 150); 
      s1.setAttributes({scalingX: 0.5, scalingY: 0.5}); 
      s2.setAttributes({scalingX: 0.5, scalingY: 0.5}); 
      s3.setAttributes({scalingX: 0.5, scalingY: 0.5}); 
      container.renderFrame(); 
     }, 5000); 
    } 
}); 

То, что я хотел бы сделать это, чтобы иметь возможность масштабировать весь контейнер раздаточный со всеми спрайтов перемещать и масштабируется соответствующим образом. Когда я уменьшаю половину контейнера, весь образ должен просто уменьшаться. Это можно сделать в некотором роде? Моя текущая реализация неверна, поскольку применяется только масштабирование, а позиции недействительны.

Answer 1

Ответ прост в конце. Просто используйте scalingCenter (X и Y):

s1.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0}); 
s2.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0}); 
s3.setAttributes({scalingX: 0.5, scalingY: 0.5, scalingCenterX: 0, scalingCenterY: 0});