extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片？相关的知识，希望对你有一定的参考价值。
参考技术A以下内容需要一定的ExtJs以及Js知识基础
Ext.define('window.ViewPicWin',//定义一个类继承window 所有配置都在该类里 包括图片地址等extend : 'Ext.window.Window',
title : '大图查看',
bodyStyle:
background: 'url(背景图片地址) repeat'//此处给窗口加个背景图
,
bodyPadding : '1 1 1 1',
autoShow : true,
modal : true,
alwaysOnTop : true,
scrollable : true,
width : 900,
height : 500,
config :
src : null, //需要展示的图片地址
clickX: null,//存放鼠标按下时指针X的位置
clickY: null,//存放鼠标按下时指针Y的位置
isMoving: false,//一个标识 作为判断当前鼠标是否按下状态 即图片拖拽中状态
offset : 1.2 //放大倍数 默认1.2倍 与原图放大缩小
,
initComponent : function()
var me = this;
var minWidth = me.width-9; //用作图片在window里的最小宽
var minHeight = me.height-54; //用作图片在window里的最小高（window的head大概54px）
Ext.applyIf(me,
items : [
xtype : 'image',
width : minWidth,
height : minHeight,
src : me.getSrc(),
listeners :
afterrender:
fn : me.onAfterRender,//监听图片渲染完成事件
scope : me
]
)
me.callParent(arguments);
,
onAfterRender : function(img, eOpts)
var win = img.up('window');
var minPicWidth = img.getWidth();
var minPicHeight = img.getHeight();
Ext.get(img.getId()).on( //获得Ext.dom.Element 添加事件 这个区别于原生的element元素 这里是ExtJs自己包装的element元素
'mousewheel': //监听鼠标滚轮事件(火狐浏览器叫DOMMouseScroll)，extjs增加监听事件前面没有on区别于普通js，他是on('事件名':...)
fn : function(e)
e.preventDefault();
var type = e.getWheelDelta();
win.zoom(Ext.get(img.getId()),win.getOffset(),type>0?true:false,minPicWidth,minPicHeight,win,e.getX(),e.getY())
,
'mousedown':
fn: function(e)
document.getElementById(img.getId()).style.cursor = "move";
e.stopEvent();
win.setClickX(e.getX());
win.setClickY(e.getY());
win.setIsMoving(true);
,
'mouseup':
fn: function(e)
if(win.getIsMoving())
win.setClickX(null);
win.setClickY(null);
win.setIsMoving(false);
,
'mousemove':
fn: function(e)
if(win.getIsMoving())
var left = e.getX()-win.getClickX();//x偏移量
var top = e.getY()-win.getClickY();//y偏移量
if( img.getX()>(win.getX()+50)
||img.getY()>(win.getY()+100))
document.getElementById(img.getId()).style.cursor = "not-allowed";
win.setIsMoving(false);
var task = new Ext.util.DelayedTask(function()
win.setScrollX(0,false);
win.setScrollY(0,false);
img.setX(win.getX()-5);
img.setY(win.getY()+45);
document.getElementById(img.getId()).style.cursor = "move";
);
task.delay(1000);
else if((img.getX()+img.getWidth())<(win.getX()+win.getWidth()-50)
||img.getY()+img.getHeight()<win.getY()+win.getHeight()-100)
document.getElementById(img.getId()).style.cursor = "not-allowed";
win.setIsMoving(false);
var task = new Ext.util.DelayedTask(function()
win.setScrollX(img.getWidth(),false);
win.setScrollY(img.getHeight(),false);
img.setX(win.getX()-(img.getWidth()-win.getWidth()));
img.setY(win.getY()-(img.getHeight()-win.getHeight()));
document.getElementById(img.getId()).style.cursor = "move";
);
task.delay(1000);
else
img.setX(win.getLastMarginX()+left);
img.setY(win.getLastMarginY()+top);
);
,
/*
* 图片放大缩小
* el:图片dom对象
* offset:放大缩小的倍数
* type: true/false 放大缩小的标识
* mw: 最小宽度
* mh: 最小高度
* win: 图片外面的window(标定scroll用) x:鼠标x坐标 y:鼠标y坐标
*/
zoom : function(el, offset, type, mw, mh, win, x, y)
var width = el.getWidth();
var height = el.getHeight();
var nwidth = type ? (width * offset) : (width / offset);
var nheight = type ? (height * offset) : (height / offset);
el.setWidth(nwidth<=mw ? mw : nwidth);
el.setHeight(nheight<=mh ? mh : nheight);
//修正参数
var elX = el.getX(),
elY = el.getY(),
elW = el.getWidth(),
elH = el.getHeight(),
winX = win.getX(),
winY = win.getY(),
winW = win.getWidth(),
winH = win.getHeight();
if(elX>=winX+50 || elY>winY+100) //左上角距离偏大
el.setX(winX);
el.setY(winY+45);
else if(elX+elW<winX+winW-50 || elY+elH<winY+winH-100) //右下角距离偏大
el.setX(winX-(elW-winW));
el.setY(winY-(elH-winH));
else //正常
var left = (x-el.getX())*(offset-1); //当前鼠标位置x偏移量
var top = (y-el.getY())*(offset-1); //当前鼠标位置y偏移量
if(type)
win.setScrollX(win.getScrollX()+left,false);
win.setScrollY(win.getScrollY()+top,false);
else
win.setScrollX(win.getScrollX()-left/offset<=0?0:win.getScrollX()-left/offset,false);
win.setScrollY(win.getScrollY()-top/offset<=0?0:win.getScrollY()-top/offset,false);
);
c# 运行时如何用鼠标拖拽放大、缩小控件（像设计器那样的效果）
这里说的控件是自定义控件
其实也不是太麻烦，新建一个用户控件， 然后重写鼠标滚轮事件protected override void OnMouseWheel(MouseEventArgs e)
base.OnMouseWheel(e);
if (e.Delta>0)
this.Size=new Size((int)(this.Size.Width*1.1f),(int)(this.Size.Height*1.1f));
else
this.Size = new Size((int)(this.Size.Width / 1.1f), (int)(this.Size.Height / 1.1f));
1.1是缩放比例 你可以自己设置。 参考技术A
这个很麻烦，你在百度知道问不到答案的。
去专门的论坛问吧
同时，和你说说，为什么麻烦。
你要处理一大堆鼠标事件
需要自定义控件
需要GDI+绘制边框虚线和小点
控件套控件，判定控件的大小，一旦一些控件默认不允许改变高度，比如，TextBox那么，你还要想其他办法来让它支持mutilline
以上是关于extjs框架下如何实现利用鼠标滚轮放大、缩小、拖动图片？的主要内容，如果未能解决你的问题，请参考以下文章