EXTJS4自学手册——图形行为（rotate,scale）

一、旋转图像：

{

                    xtype: 'button',

                    text: '旋转的字',

                    handler: function (btn) {

                        Ext.create('Ext.window.Window', {

                            layout: 'fit',

                            items: Ext.create('Ext.draw.Component', {

                                viewBox: false,//是否随window一起改变大小，false（不改变）

                                items: [{

                                    type: 'text',//画字

                                    text: 'Hello World',//要写的内容

                                    fill: '#2266FF',//填充颜色

                                    font: '20px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',//字体

                                    x: 200,//X坐标

                                    y: 200,//Y坐标

                                    rotate: {

                                        degrees: 45//旋转45度

                                    }

                                }]

                            })

                        }).show();

                    }

                }

显示效果：

二、放大缩小图像：

{

                    xtype: 'button',

                    text: '缩放的字',

                    handler: function (btn) {

                        Ext.create('Ext.window.Window', {

                            layout: 'fit',

                            items: Ext.create('Ext.draw.Component', {

                                viewBox: false,//是否随window一起改变大小，false（不改变）

                                items: [{

                                    type: 'text',//画字

                                    text: 'Hello World',//要写的内容

                                    fill: '#2266FF',//填充颜色

                                    font: '20px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',//字体

                                    x: 200,//X坐标

                                    y: 200,//Y坐标

                                    scale: {

                                        x: 2,//X坐标拉长一倍

                                        y: 5//y坐标拉长五倍

                                    }

                                }]

                            })

                        }).show();

                    }

                }

显示效果：