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

См. скрипку для кода теста: 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);
    }
});

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

1 ответ

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