关于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图片，可能是这个原因造成旋转无法等比例缩放的原因，看一下效果图
旋转过后 位置发生了偏移，不知道这种情况下如何解决。