WPF下的仿QQ图片查看器

本例中的大图模式使用图片控件展示，监听控件的鼠标滚轮事件和移动事件，缩略图和鹰眼模式采用装饰器对象IndicatorObject和Canvas布局。百分比使用一个定时器，根据图片的放大倍数计算具体的数值显示。

首先看看效果图：

以下开始绘制图片定义缩略图上白色的矩形，这其实是一个Indicator，它的外围是一个Canvas，然后缩略图是一个Image控件

 internal class IndicatorObject : ContentControl

    {

        private MaskCanvas canvasOwner;

        public IndicatorObject(MaskCanvas canvasOwner)

        {

            this.canvasOwner = canvasOwner;

        }

        static IndicatorObject()

        {

            var ownerType = typeof(IndicatorObject);

            FocusVisualStyleProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(null));

            DefaultStyleKeyProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(ownerType));

            MinWidthProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(5.0));

            MinHeightProperty.OverrideMetadata(ownerType, new FrameworkPropertyMetadata(5.0));

        }

        public void Move(System.Windows.Point offset)

        {

            var x = Canvas.GetLeft(this) + offset.X;

            var y = Canvas.GetTop(this) + offset.Y;

            x = x <  ?  : x;

            y = y <  ?  : y;

            x = Math.Min(x, this.canvasOwner.Width - this.Width);

            y = Math.Min(y, this.canvasOwner.Height - this.Height);

            Canvas.SetLeft(this, x);

            Canvas.SetTop(this, y);

            canvasOwner.UpdateSelectionRegion(new Rect(x, y, Width, Height), true);

        }

    }

Indicator

查看位置所在的矩形定义好了，然后开始定义外围的Canvas，这个作用是可以在Canvas上选中移动到查看的位置

  public class MaskCanvas : Canvas

    {

        public MaskCanvas()

        {

            Loaded += OnLoaded;

        }

        public System.Windows.Media.Brush SelectionBorderBrush = new SolidColorBrush(System.Windows.Media.Color.FromArgb(, , , ));

        public Thickness SelectionBorderThickness = new Thickness();

        public System.Windows.Media.Brush MaskWindowBackground = new SolidColorBrush(System.Windows.Media.Color.FromArgb(, , , ));

        public event EventHandler<LoactionArgs> LoationChanged;

        private void OnLoaded(object sender, RoutedEventArgs e)

        {

           maskRectLeft.Fill = maskRectRight.Fill = maskRectTop.Fill = maskRectBottom.Fill = MaskWindowBackground;

            SetLeft(maskRectLeft, );

            SetTop(maskRectLeft, );

            SetRight(maskRectRight, );

            SetTop(maskRectRight, );

            SetTop(maskRectTop, );

            SetBottom(maskRectBottom, );

            maskRectLeft.Height = ActualHeight;

            Children.Add(maskRectLeft);

            Children.Add(maskRectRight);

            Children.Add(maskRectTop);

            Children.Add(maskRectBottom);

            selectionBorder.Stroke = SelectionBorderBrush;

            selectionBorder.StrokeThickness =  ;

            Children.Add(selectionBorder);

            indicator = new IndicatorObject(this);

            indicator.Visibility = System.Windows.Visibility.Hidden;

            Children.Add(indicator);

            CompositionTarget.Rendering += OnCompositionTargetRendering;

        }

        private void UpdateSelectionBorderLayout()

        {

            if (!selectionRegion.IsEmpty)

            {

                SetLeft(selectionBorder, selectionRegion.Left);

                SetTop(selectionBorder, selectionRegion.Top);

                selectionBorder.Width = selectionRegion.Width;

                selectionBorder.Height = selectionRegion.Height;

            }

        }

        private void UpdateMaskRectanglesLayout()

        {

            var actualHeight = ActualHeight;

            var actualWidth = ActualWidth;

            if (selectionRegion.IsEmpty)

            {

                SetLeft(maskRectLeft, );

                SetTop(maskRectLeft, );

                maskRectLeft.Width = actualWidth;

                maskRectLeft.Height = actualHeight;

                maskRectRight.Width = maskRectRight.Height = maskRectTop.Width = maskRectTop.Height = maskRectBottom.Width = maskRectBottom.Height = ;

            }

            else

            {

                var temp = selectionRegion.Left;

                if (maskRectLeft.Width != temp)

                {

                    maskRectLeft.Width = temp <  ?  : temp; //Math.Max(0, selectionRegion.Left);

                }

                temp = ActualWidth - selectionRegion.Right;

                if (maskRectRight.Width != temp)

                {

                    maskRectRight.Width = temp <  ?  : temp; //Math.Max(0, ActualWidth - selectionRegion.Right);

                }

                if (maskRectRight.Height != actualHeight)

                {

                    maskRectRight.Height = actualHeight;

                }

                SetLeft(maskRectTop, maskRectLeft.Width);

                SetLeft(maskRectBottom, maskRectLeft.Width);

                temp = actualWidth - maskRectLeft.Width - maskRectRight.Width;

                if (maskRectTop.Width != temp)

                {

                    maskRectTop.Width = temp <  ?  : temp; //Math.Max(0, ActualWidth - maskRectLeft.Width - maskRectRight.Width);

                }

                temp = selectionRegion.Top;

                if (maskRectTop.Height != temp)

                {

                    maskRectTop.Height = temp <  ?  : temp; //Math.Max(0, selectionRegion.Top);

                }

                maskRectBottom.Width = maskRectTop.Width;

                temp = actualHeight - selectionRegion.Bottom;

                if (maskRectBottom.Height != temp)

                {

                    maskRectBottom.Height = temp <  ?  : temp; //Math.Max(0, ActualHeight - selectionRegion.Bottom);

                }

            }

        }

        #region Fileds & Props

        private Rect selectionRegion = Rect.Empty;

        private bool isMaskDraging;

        public bool MoveState = false;

        private IndicatorObject indicator;

        private System.Windows.Point? selectionStartPoint;

        private System.Windows.Point? selectionEndPoint;

        private readonly System.Windows.Shapes.Rectangle selectionBorder = new System.Windows.Shapes.Rectangle();

        private readonly System.Windows.Shapes.Rectangle maskRectLeft = new System.Windows.Shapes.Rectangle();

        private readonly System.Windows.Shapes.Rectangle maskRectRight = new System.Windows.Shapes.Rectangle();

        private readonly System.Windows.Shapes.Rectangle maskRectTop = new System.Windows.Shapes.Rectangle();

        private readonly System.Windows.Shapes.Rectangle maskRectBottom = new System.Windows.Shapes.Rectangle();

        public System.Drawing.Size? DefaultSize

        {

            get;

            set;

        }

        #endregion

        #region Mouse Managment

        private bool IsMouseOnThis(RoutedEventArgs e)

        {

            return e.Source.Equals(this) || e.Source.Equals(maskRectLeft) || e.Source.Equals(maskRectRight) || e.Source.Equals(maskRectTop) || e.Source.Equals(maskRectBottom);

        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)

        {

            indicator.Visibility = System.Windows.Visibility.Visible;

            if (e.Source.Equals(indicator))

            {

                HandleIndicatorMouseDown(e);

            }

            base.OnMouseLeftButtonDown(e);

        }

        protected override void OnMouseMove(MouseEventArgs e)

        {

            if (IsMouseOnThis(e))

            {

                UpdateSelectionRegion(e, UpdateMaskType.ForMouseMoving);

                e.Handled = true;

            }

            base.OnMouseMove(e);

        }

        protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)

        {

            if (IsMouseOnThis(e))

            {

                UpdateSelectionRegion(e, UpdateMaskType.ForMouseLeftButtonUp);

                FinishShowMask();

            }

            base.OnMouseLeftButtonUp(e);

        }

        protected override void OnMouseRightButtonUp(MouseButtonEventArgs e)

        {

            indicator.Visibility = Visibility.Collapsed;

            selectionRegion = Rect.Empty;

            selectionBorder.Width = selectionBorder.Height = ;

           // ClearSelectionData();

            UpdateMaskRectanglesLayout();

            base.OnMouseRightButtonUp(e);

        }

        internal void HandleIndicatorMouseDown(MouseButtonEventArgs e)

        {

            MoveState = true;

        }

        internal void HandleIndicatorMouseUp(MouseButtonEventArgs e)

        {

            MoveState = false;

        }

        private void PrepareShowMask(System.Drawing.Point mouseLoc)

        {

            indicator.Visibility = Visibility.Collapsed;

            selectionBorder.Visibility = Visibility.Visible;

        }

        private void UpdateSelectionRegion()

        {

            var startPoint = new System.Drawing.Point(,);

            var endPoint = new System.Drawing.Point(, );

            var sX = startPoint.X;

            var sY = startPoint.Y;

            var eX = endPoint.X;

            var eY = endPoint.Y;

            var deltaX = eX - sX;

            var deltaY = eY - sY;

            if (Math.Abs(deltaX) >= SystemParameters.MinimumHorizontalDragDistance ||

                Math.Abs(deltaX) >= SystemParameters.MinimumVerticalDragDistance)

            {

                double x = sX < eX ? sX : eX;//Math.Min(sX, eX);

                double y = sY < eY ? sY : eY;//Math.Min(sY, eY);

                double w = deltaX <  ? -deltaX : deltaX;//Math.Abs(deltaX);

                double h = deltaY <  ? -deltaY : deltaY;//Math.Abs(deltaY);

                selectionRegion = new Rect(x, y, w, h);

            }

            else

            {

               selectionRegion = new Rect(startPoint.X, startPoint.Y, DefaultSize.Value.Width, DefaultSize.Value.Height);

            }

        }

        private void UpdateSelectionRegion(MouseEventArgs e, UpdateMaskType updateType)

        {

            if (updateType == UpdateMaskType.ForMouseMoving && e.LeftButton != MouseButtonState.Pressed)

            {

                selectionStartPoint = null;

            }

            if (selectionStartPoint.HasValue)

            {

                selectionEndPoint = e.GetPosition(this);

                var startPoint = (System.Windows.Point)selectionEndPoint;

                var endPoint = (System.Windows.Point)selectionStartPoint;

                var sX = startPoint.X;

                var sY = startPoint.Y;

                var eX = endPoint.X;

                var eY = endPoint.Y;

                var deltaX = eX - sX;

                var deltaY = eY - sY;

                if (Math.Abs(deltaX) >= SystemParameters.MinimumHorizontalDragDistance ||

                    Math.Abs(deltaX) >= SystemParameters.MinimumVerticalDragDistance)

                {

                    isMaskDraging = true;

                    double x = sX < eX ? sX : eX;//Math.Min(sX, eX);

                    double y = sY < eY ? sY : eY;//Math.Min(sY, eY);

                    double w = deltaX <  ? -deltaX : deltaX;//Math.Abs(deltaX);

                    double h = deltaY <  ? -deltaY : deltaY;//Math.Abs(deltaY);

                    selectionRegion = new Rect(x, y, w, h);

                }

                else

                {

                    if (DefaultSize.HasValue && updateType == UpdateMaskType.ForMouseLeftButtonUp)

                    {

                        isMaskDraging = true;

                        selectionRegion = new Rect(startPoint.X, startPoint.Y, DefaultSize.Value.Width, DefaultSize.Value.Height);

                    }

                    else

                    {

                        isMaskDraging = false;

                    }

                }

            }

            UpdateIndicator(selectionRegion);

        }

        internal void UpdateSelectionRegion(Rect region, bool flag = false)

        {

            selectionRegion = region;

            UpdateIndicator(selectionRegion);

            if (LoationChanged != null && flag)

            {

                LoationChanged(this, new LoactionArgs(region.Left/this.Width, region.Top/this.Height));

            }

        }

        private void FinishShowMask()

        {

            if (IsMouseCaptured)

            {

                ReleaseMouseCapture();

            }

            if (isMaskDraging)

            {

                UpdateIndicator(selectionRegion);

                ClearSelectionData();

            }

        }

        private void ClearSelectionData()

        {

            isMaskDraging = false;

            selectionBorder.Visibility = Visibility.Collapsed;

            selectionStartPoint = null;

            selectionEndPoint = null;

        }

        private void UpdateIndicator(Rect region)

        {

            if (indicator == null)

                return;

            if (region.Width < indicator.MinWidth || region.Height < indicator.MinHeight)

            {

                return;

            }

 indicator.Visibility = Visibility.Visible;

            indicator.Width = region.Width;

            indicator.Height = region.Height;

            SetLeft(indicator, region.Left);

            SetTop(indicator, region.Top);

        }

        private Rect GetIndicatorRegion()

        {

            return new Rect(GetLeft(indicator), GetTop(indicator), indicator.ActualWidth, indicator.ActualHeight);

        }

        #endregion

        #region Render

        private void OnCompositionTargetRendering(object sender, EventArgs e)

        {

            UpdateSelectionBorderLayout();

            UpdateMaskRectanglesLayout();

        }

        #endregion

        #region inner types

        private enum UpdateMaskType

        {

            ForMouseMoving,

            ForMouseLeftButtonUp

        }

        #endregion

    }

Canvas

缩略图很简单，按照比例缩放图片加载上即可

   thumbImage = m_Bitmap.GetThumbnailImage(thumbWidth, thumbHeight, null, IntPtr.Zero) as Bitmap;  //thumbWidth指定宽,thumbHeight指定高度

ThumbnailImage

然后我们为大图加上监听事件ScrollChanged和MouseWheel 以及MouseLeftButtonDown、MouseLeftButtonUp、 MouseMove

ScrollChanged用来计算显示的滚动区域范围

 if (e.ExtentHeight > e.ViewportHeight || e.ExtentWidth > e.ViewportWidth)

            {

                offsetX = (e.ExtentWidth - e.ViewportWidth) / ;

                offsetY = (e.ExtentHeight - e.ViewportHeight) / ;

                svImg.ScrollToVerticalOffset(offsetY);

                svImg.ScrollToHorizontalOffset(offsetX);

            }

            double timeH =  svImg.ViewportHeight/ (svImg.ViewportHeight + svImg.ScrollableHeight);

            double timeW = svImg.ViewportWidth / (svImg.ViewportWidth + svImg.ScrollableWidth);

            double w = thumbWidth * timeW;

            double h = thumbHeight * timeH;

            double offsetx = ;

            double offsety = ;

            if (svImg.ScrollableWidth == )

            {

                offsetx = ;

            }

            else

            {

                offsetx = (w - thumbWidth) / svImg.ScrollableWidth * svImg.HorizontalOffset;

            }

            if (svImg.ScrollableHeight == )

            {

                offsety = ;

            }

            else

            {

                offsety = (h - thumbHeight) / svImg.ScrollableHeight * svImg.VerticalOffset;

            }

            Rect rect = new Rect( - offsetx,  - offsety, w, h);

            mask.UpdateSelectionRegion(rect);

ScrollChanged

MouseWheel计算滚动比例

  var mosePos = e.GetPosition(img);

            scale = scale * (e.Delta >  ? 1.2 :  / 1.2);

            scale = Math.Max(scale, 0.15);

            scale = Math.Min(, scale);

            this.txtZoom.Text = ((int)(scale * )).ToString();

            img.Width = scale * imgWidth;

            img.Height = scale * imgHeight;

            offsetX = svImg.ScrollableWidth / ;

            offsetY = svImg.ScrollableHeight / ;

MouseWheel

MouseLeftButtonDown后三个事件在移动图片时使用

MouseLeftButtonDown、MouseLeftButtonUp、MouseMove

以上大部分的工作已经做完了，然后我们加入一个定时器的功能，调节显示百分比的时间。加上一个Timer类即可。

当然在ScrolChanged里面我们加入了鹰眼监控，细心的朋友可以在事件里面看到。

巴特西

WPF下的仿QQ图片查看器

最新文章

热门文章