比例尺全平局容器内容

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