スケール全体ドローコンテナのコンテンツ

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