13693261870
2022-09-16 354b3dbfbffb3df45212a2a44dbbf48b4acc2594
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Ext.require(['Ext.draw.Text', 'Ext.slider.Single']);
Ext.onReady(function() {
    Ext.create('Ext.draw.Text', {
        renderTo: Ext.get('text-ph'),
        padding: 20,
        height: 350,
        degrees: 45,
        text: 'With Ext JS 4.0 Drawing',
        textStyle: {
            fill: '#000',
            'font-size': '18px',
            'font-family': 'Arial'
        }
    });
 
    Ext.create('Ext.draw.Text', {
        renderTo: Ext.get('text-ph'),
        padding: 20,
        height: 350,
        degrees: 90,
        text: 'Creating a rotated Text component',
        textStyle: {
            fill: '#000',
            'font-size': '18px',
            'font-family': 'Arial'
        }
    });
 
    Ext.create('Ext.draw.Text', {
        renderTo: Ext.get('text-ph'),
        id: 'snappy',
        width: 200,
        height: 350,
        autoSize: false,
        viewBox: false,
        padding: 20,
        degrees: 315,
        text: 'Is a snap!',
        textStyle: {
            padding: 20,
            fill: '#000',
            'font-size': '18px',
            'font-family': 'Arial',
            y: 50
        }
    });
 
    Ext.create('Ext.slider.Single', {
        renderTo: Ext.get('slider-ph'),
        hideLabel: true,
        width: 400,
        minValue: 0,
        maxValue: 360,
        value: 315,
        listeners: {
            change: function(slider, value) {
                var sprite = Ext.getCmp('snappy').surface.items.first();
                sprite.setAttributes({
                    rotation: {
                        degrees: value
                    }
                }, true);
            }
        }
    });
});