使用devexpress 控件可以作出美觀漂亮的界面,其豐富的控件庫大多可以知足咱們平常開發的要求。但在有的方面DEVexpress仍是作得不夠完善的,好比說其圖表控件(charting)庫就不支持局部縮放功能,而dev默認提供的縮放功能實在是太差勁了,怎麼辦呢,一個圖表的縮放是其亮點之一,又不能沒有。怎麼才能實現想要的局部縮放功能呢?
express
我如今想要的效果是選定圖表的局部區域,對選定的局部區域放大,同時又要保留初始的圖表使放大後的圖可以還原到初始狀態。在此將操做分爲兩個功能,一是局部放大,二是還原。實現局部放大效果的操做分解爲如下三個觸發事件,前後順序是:左鍵點擊圖表、向右下拖動鼠標移動、釋放左鍵。還原操做分解爲兩個觸發事件,前後順序是:左鍵點擊圖表,除右下方向外的其它方向脫東鼠標移動、釋放左鍵。這裏要判斷光標是否有移動,沒有位移移動就不是以上的局部放大和還原操做。實現代碼以下c#
//====================================================================== // // Copyright (C) // All rights reserved // // created by 王超 at 10/12/2014 // email:atasas@163.com // //====================================================================== private bool _isScale = false;//鼠標左鍵是否按下 private object _maxX, _minX, _maxY, _minY,_maxX1, _minX1, _maxY1, _minY1;//原圖X軸和Y軸的最大和最小值以及第二座標軸(若是有)X軸和Y軸的最大和最小值 private object _x0, _x1, _y0, _y1; private object _x00, _y00, _x11,_y11; private Point _p0 = new Point(); private Point _p1 = new Point(); //單擊左鍵 void DevUCChart_MouseDown(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) { _p0 = e.Location; SetLocationClientValue(_p0, ref _x0, ref _y0,ref _x00,ref _y00); _isScale = true; } } //將屏幕座標轉換爲圖表的座標 void SetLocationClientValue(Point p,ref object x0,ref object y0,ref object x1,ref object y1) { try { XYDiagram diagram = this.Diagram as XYDiagram; DiagramCoordinates coord = diagram.PointToDiagram(p); switch (coord.ArgumentScaleType) { case ScaleType.DateTime: x0 = coord.DateTimeArgument; break; case ScaleType.Numerical: x0 = coord.NumericalArgument; break; case ScaleType.Qualitative: x0 = coord.QualitativeArgument; break; } switch (coord.ValueScaleType) { case ScaleType.DateTime: y0 = coord.DateTimeValue; break; case ScaleType.Numerical: y0 = coord.NumericalValue; break; } if (diagram.GetAllAxesX().Count > 1) { AxisValue ax = coord.GetAxisValue(diagram.GetAllAxesX()[1]); switch (coord.ArgumentScaleType) { case ScaleType.DateTime: x1 = ax.DateTimeValue; break; case ScaleType.Numerical: x1 = ax.NumericalValue; break; case ScaleType.Qualitative: x1 = ax.QualitativeValue; break; } } if (diagram.GetAllAxesY().Count > 1) { AxisValue ax = coord.GetAxisValue(diagram.GetAllAxesY()[1]); switch (coord.ValueScaleType) { case ScaleType.DateTime: y1 = ax.DateTimeValue; break; case ScaleType.Numerical: y1 = ax.NumericalValue; break; } } } catch { } } //拖動鼠標事件,繪製虛線矩形 void DevUCChart_MouseMove(object sender, MouseEventArgs e) { if (_isScale) { Point pE = new Point(e.Location.X - this.Location.X, e.Location.Y - this.Location.Y); Graphics g = this.CreateGraphics(); Pen pen = new Pen(new SolidBrush(Color.FromArgb(100, 100, 100))); pen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot; g.DrawRectangle(pen, _p0.X, _p0.Y, e.Location.X - _p0.X, e.Location.Y - _p0.Y); } } //釋放左鍵事件 void DevUCChart_MouseUp(object sender, MouseEventArgs e) { try { if (e.Button == MouseButtons.Left) { _p1 = e.Location; SetLocationClientValue(_p1, ref _x1, ref _y1, ref _x11, ref _y11); XYDiagram diag = (XYDiagram)this.Diagram; if (_p1.X ==_p0.X && _p1.Y == _p0.Y)//沒有拖動操做 { return; } if (_p1.X > _p0.X && _p1.Y > _p0.Y)//右下拖動,局部方大 { diag.AxisX.Range.MaxValue = _x1; diag.AxisX.Range.MinValue = _x0; if (diag.AxisY.Range.MinValue is double) { double __y1 = (double)_y1; double __y0 = (double)_y0; diag.AxisY.Range.MaxValue = __y1 > __y0 ? __y1 : __y0; diag.AxisY.Range.MinValue = __y1 > __y0 ? __y0 : __y1; } if (diag.GetAllAxesX().Count > 1) { diag.GetAllAxesX()[1].Range.MinValue = _x00; diag.GetAllAxesX()[1].Range.MaxValue = _x11; } } else//其它方向拖動,還原 { diag.AxisX.Range.MinValue = _minX; diag.AxisX.Range.MaxValue = _maxX; diag.AxisY.Range.MinValue = _minY; diag.AxisY.Range.MaxValue = _maxY; if (diag.GetAllAxesX().Count > 1) { diag.GetAllAxesX()[1].Range.MinValue = _minX1; diag.GetAllAxesX()[1].Range.MaxValue = _maxX1; } else { diag.GetAllAxesY()[1].Range.MinValue = _minY1; diag.GetAllAxesY()[1].Range.MaxValue = _maxY1; } } } } catch { } finally { _isScale = false; } }
效果以下:this
一、選定區間x軸: 2月8號到3月14號,y軸:1.4到2.5
spa
二、局部方大效果code
以上就是我實現的對devexpress控件庫圖表控件的局部縮放擴展功能,雖然仍是有點不完美,但基本上能知足個人要了。事件