examples/draw/RotateText.js

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