关于ext 如何实现图片预览及放大缩小 旋转的功能

1.首先来看一下效果图

2.上代码  主要2个文件一个PhotoPreviewWin.js文件    一个控制层PvVocationController.js

Ext.define('app.view.biz.pvvocation.PhotoPreviewWin', {
    extend: 'Ext.window.Window',
    xtype: 'pvvocation-editwin',
    requires: [
        'app.ux.BtnNormal', //导入普通按钮
    ],
    width: 1100,
    height: 620,
    modal: true,
    draggable: false, //禁止拖动
    layout: {
        type: 'hbox',
        align: 'middle',
        pack: 'center'
    },
    items: [{
        id:'bigimage',
        xtype: 'box',
        style: 'transform:rotate(0deg);',
        draggable: true, //可以拖动组件
        autoEl: {
            tag: 'img',
            src: ''
        }
    }],
    buttonAlign: 'center',
    buttons: [{
        xtype: 'btnNormal',
        text: '缩小',
        id: 'reduce',
        handle: 'reduce',
    }, {
        xtype: 'btnNormal',
        margin: '0 0 0 20',
        id: 'enlarge',
        text: '放大',
        handle: 'enlarge',
    }, {
        xtype: 'btnNormal',
        margin: '0 0 0 20',
        id: 'anticlockwise',
        text: '向左旋转',
        handle: 'anticlockwise'
    }, {
        xtype: 'btnNormal',
        margin: '0 0 0 20',
        id: 'clockwise',
        text: '向右旋转',
        handle: 'clockwise'
    }]

});

3.预览中可以将图片路径赋值给src，通过判断原图宽高 对图片进行等比例缩放显示，下面为图片等比例缩放代码

var win = Ext.create('app.view.biz.pvvocation.PhotoPreviewWin', {
            title: '图片预览'
        });
        Ext.getCmp('reduce').on('click', this.Reduce); //缩小按钮事件绑定
        Ext.getCmp('enlarge').on('click', this.Enlarge); //放大按钮事件绑定 
        Ext.getCmp('clockwise').on('click', this.Clockwise); //向右旋转
        Ext.getCmp('anticlockwise').on('click', this.Anticlockwise); //向左旋转

        //获取原始图片及弹窗的大小(弹窗大小需要减去94高度)
        var image = new Image();
        image.src = Ext.getCmp("image").getEl().dom.src;
        var width = parseInt(image.width);
        var height = parseInt(image.height);
        var win_width = parseInt(win.width);
        var win_height = parseInt(win.height - 94);
        if(win_width > width && win_height < height) {
            //弹窗的宽大于原图宽,高度小于原图高,使用高度等比例缩小
            var height_rate = win_height / height;
            win.down('box').width = width * height_rate;
            win.down('box').height = height * height_rate;
        } else if(win_width < width && win_height > height) {
            //弹窗宽度小于圆度,高度大于原图,使用宽度等比例缩小
            var width_rate = win_width / width;
            win.down('box').width = width * width_rate;
            win.down('box').height = height * width_rate;
        } else {
            //如果弹窗的高度宽度均小于原图,采取比较小的比例
            var width_rate = win_width / width;
            var height_rate = win_height / height;
            if(width_rate > height_rate) {
                win.down('box').width = width * height_rate;
                win.down('box').height = height * height_rate;
            } else {
                win.down('box').width = width * width_rate;
                win.down('box').height = height * width_rate;
            }
        }
        win.down('box').autoEl.src = image.src;//图片路径写入
        win.show();

4.图片放大 缩小 旋转的控制

/**
     * 图片放大控制
     * @param {Object} button
     */
    Enlarge: function(button) {
        var bigimage = Ext.getCmp('bigimage'); //获取预览打图 长和宽
        var width = document.getElementById('bigimage').style.width;
        var height = document.getElementById('bigimage').style.height;
        document.getElementById('bigimage').style.width = parseInt(width) * 1.1 + 'px';
        document.getElementById('bigimage').style.height = parseInt(height) * 1.1 + 'px';
    },
    /**
     * 图片缩小控制
     * @param {Object} button
     */
    Reduce: function(button) {
        var bigimage = Ext.getCmp('bigimage'); //获取预览打图 长和宽
        var width = document.getElementById('bigimage').style.width;
        var height = document.getElementById('bigimage').style.height;
        document.getElementById('bigimage').style.width = parseInt(width) * 0.9 + 'px';
        document.getElementById('bigimage').style.height = parseInt(height) * 0.9 + 'px';
    },

    /**
     * 图片向右旋转
     * @param {Object} button
     */
    Clockwise: function(button) {
        //获取当前的transform的值  rotate(90deg)
        var transform = document.getElementById('bigimage').style.transform;
        //截取数字  0deg,利用parseInt转换为数字 
        var num = transform.substr(7);
        var result = parseInt(num);
        result = (result + 90) % 360;
        var win = button.up('pvvocation-editwin');
        document.getElementById('bigimage').style.transform = 'rotate(' + result + 'deg)';
    },

/**
     * 图片向左旋转
     * @param {Object} button
     */
    Anticlockwise: function(button) {
        //获取当前的transform的值  rotate(90deg)
        var transform = document.getElementById('bigimage').style.transform;
        //截取数字  0deg,利用parseInt转换为数字 
        var num = transform.substr(7);
        var result = parseInt(num);
        result = (result - 90) % 360;
        var win = button.up('pvvocation-editwin');
        document.getElementById('bigimage').style.transform = 'rotate(' + result + 'deg)';
    },

5.总结一点：本来图片旋转想做成类似 预览 自动等比例缩放的，但是缩放之后发现 旋转后没有办法自动对比，需要设置top属性才能靠齐顶部栏，所以无奈之下选择旋转不进行等比例缩放，只是图片旋转了一下。 另外发现图片预览 修改的box盒子，而旋转的是image图片，可能是这个原因造成旋转无法等比例缩放的原因，看一下效果图

旋转过后 位置发生了偏移，不知道这种情况下如何解决。