在图像内包含选择矩形

Question

I looked everywhere and haven't come across anything but I would like to know the best way to contain a selection rectangle so that it wouldn't go out of bounds. I have an application were user draws a selection rectangle on top of an image. The rectangle can be also be moved and resized. Currently I just use an exception handler which when an out of range exception is catched it would alert the user. The out of range exception only occurs when moving the drawn rectangle and I would like to make it more streamlined that the actual rectangle cant be dragged or resized outside of the image. Below is the xaml and code behind for my crop control.

Crop Control Code Behind:

     public partial class CropControl : UserControl
{
    #region Data's
    private bool isDragging = false;
    private Point anchorPoint = new Point();
    private bool MoveRect = false;          //flag which intially set to false which means a crop rectangle is not moved but created.
    private bool MoveInProgress = false;    //flag that is set to true if the crop rect is moving, otherwise false.
    private Point LastPoint;                // The drag's last point
    HitType MouseHitType = HitType.None;    //part of the rectangle under the mouse
    private enum HitType { None, Body, UL, UR, LR, LL, L, R, T, B }; //Enum for the part of the rectangle the mouse is over.
    #endregion

    #region Constructor
    public CropControl()
    {
        InitializeComponent();

    }
    #endregion

    #region Dependency Property
    //Register the Dependency Property
    public static readonly DependencyProperty SelectionProperty =
        DependencyProperty.Register("Selection", typeof(Rect), typeof(CropControl), new PropertyMetadata(default(Rect)));


    public Rect Selection
    {
        get { return (Rect)GetValue(SelectionProperty); }
        set { SetValue(SelectionProperty, value); }
    }

    // this is used, to react on changes from ViewModel. If you assign a  
    // new Rect in your ViewModel you will have to redraw your Rect here
    private static void OnSelectionChanged(System.Windows.DependencyObject d, System.Windows.DependencyPropertyChangedEventArgs e)
    {
        Rect newRect = (Rect)e.NewValue;
        Rectangle selectionRectangle = d as Rectangle;

        if (selectionRectangle != null)
            return;

        selectionRectangle.SetValue(Canvas.LeftProperty, newRect.X);
        selectionRectangle.SetValue(Canvas.TopProperty, newRect.Y);
        selectionRectangle.Width = newRect.Width;
        selectionRectangle.Height = newRect.Height;
    }
    #endregion
    private Point lastLoc;


    #region MouseLeftButtonDown Event
    private void LoadedImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        lastLoc = new Point(Canvas.GetLeft(selectionRectangle), Canvas.GetTop(selectionRectangle));

        //This statement will enable the creation of a new rectangle only if the mouse left
        //button press is outside of a created rectangle and that crop rectangle was initially created.
        //This is known since the HitType if outside the rectangle will always be set to None and the crop rect width > 0.
        //The previous cropping rect will be removed by setting its value to null.
        if (MouseHitType== HitType.None && selectionRectangle.Width>0)
        {
            selectionRectangle.Width = 0;         //set crop rectangle's width to 0
            selectionRectangle.Height = 0;        //set crop rectangle's height to 0
            SetMouseCursor();
            MoveRect = false;           //flag that crop rectangle is not being moved but drawn.
        }

        //This statement test if the crop rectangle is not being dragged and moved. If true it would 
        //set the x and y position of the crop rect in accordance to Canvas. If false it means that
        //crop rectangle was already created and is now being moved to different position in the canvas.
        if (!isDragging && !MoveRect)
        {
            anchorPoint.X = e.GetPosition(BackPanel).X;   //get the x position of the mouse
            anchorPoint.Y = e.GetPosition(BackPanel).Y;   //get the y position of the mouse
            isDragging = true;                      //flag that the user is dragging the mouse to create a rectangle
            BackPanel.Cursor = Cursors.Cross;       //change the cursor to a cross while left button is held down
        }
        else
        {
            MouseHitType = SetHitType(selectionRectangle, e.GetPosition(BackPanel));     //get hittype
            SetMouseCursor();        //set the mouse cursor based on the hittype
            if (MouseHitType == HitType.None) return;       
            LastPoint = e.GetPosition(BackPanel);  
            MoveInProgress = true;      //flag true since rectangle is being moved
        }
    }
    #endregion

    private double CanvasTop, CanvasLeft;

    #region MouseMove Event
    private void LoadedImage_MouseMove(object sender, MouseEventArgs e)
    {
        Point offset = new Point((anchorPoint.X-lastLoc.X),(anchorPoint.Y-lastLoc.Y));
        var newX=(anchorPoint.X+(e.GetPosition(BackPanel).X)-anchorPoint.X);
        var newY=(anchorPoint.Y+(e.GetPosition(BackPanel).Y)-anchorPoint.Y);
        CanvasTop = newX - offset.X;
        CanvasLeft = newY - offset.Y;
        //Statement that checks if crop rect is being created or moved. If moved it will set the 
        //dimension of the rectanlge and if not it would set the location of the new rectangle.
        if (isDragging  && !MoveRect)
        {
            double x = e.GetPosition(BackPanel).X;      //get x position of mouse
            double y = e.GetPosition(BackPanel).Y;      //get y position of mouse

            selectionRectangle.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));       //set the bottom
            selectionRectangle.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));       //set the top
            selectionRectangle.Width = Math.Abs(x - anchorPoint.X);         //set the width
            selectionRectangle.Height = Math.Abs(y - anchorPoint.Y);        //set the height
            if (selectionRectangle.Visibility != Visibility.Visible)       //make crop rectangle visible if its not.
                selectionRectangle.Visibility = Visibility.Visible;

        }
        else if (!isDragging && MoveRect)
        {

            if (!MoveInProgress)
            {
                MouseHitType = SetHitType(selectionRectangle, e.GetPosition(BackPanel));
                SetMouseCursor();
            }
            else
            {
                // See how much the mouse has moved.
                Point point = e.GetPosition(BackPanel);
                double offset_x = point.X - LastPoint.X;
                double offset_y = point.Y - LastPoint.Y;

                // Get the rectangle's current position.
                double new_x = Canvas.GetLeft(selectionRectangle);     
                double new_y = Canvas.GetTop(selectionRectangle);
                double new_width = selectionRectangle.Width;
                double new_height = selectionRectangle.Height;

                // Update the rectangle.
                switch (MouseHitType)
                {
                    case HitType.Body:
                        new_x += offset_x;
                        new_y += offset_y;
                        break;
                    case HitType.UL:
                        new_x += offset_x;
                        new_y += offset_y;
                        new_width -= offset_x;
                        new_height -= offset_y;
                        break;
                    case HitType.UR:
                        new_y += offset_y;
                        new_width += offset_x;
                        new_height -= offset_y;
                        break;
                    case HitType.LR:
                        new_width += offset_x;
                        new_height += offset_y;
                        break;
                    case HitType.LL:
                        new_x += offset_x;
                        new_width -= offset_x;
                        new_height += offset_y;
                        break;
                    case HitType.L:
                        new_x += offset_x;
                        new_width -= offset_x;
                        break;
                    case HitType.R:
                        new_width += offset_x;
                        break;
                    case HitType.B:
                        new_height += offset_y;
                        break;
                    case HitType.T:
                        new_y += offset_y;
                        new_height -= offset_y;
                        break;
                }

                // Don't use negative width or height.
                if ((new_width > 0) && (new_height > 0))
                {

                    // Update the rectangle.
                    Canvas.SetLeft(selectionRectangle, new_x);
                    Canvas.SetTop(selectionRectangle, new_y);
                    selectionRectangle.Width = new_width;
                    selectionRectangle.Height = new_height;

                    // Save the mouse's new location.
                    LastPoint = point;
                }
            }
        }

    }
    #endregion

    #region MouseLeftButtonUp Event
    private void LoadedImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {

        //statement which checks if the mouse left button action is for either creating or
        //moving the crop rectangle. If true, isDragging=false since the crop rect is created
        //and moverect = true since the created rectangle is ready to be moved.
        if (isDragging && !MoveRect)
        {
            isDragging = false;
            if (selectionRectangle.Width > 0)
            {
                MoveRect = true;
            }
        }
        else
        {
            MoveInProgress = false;  //flags Move in progress as false since rect move action is done.
        }

        // Set the Selection to the new rect, when the mouse button has been released
        Selection = new Rect(
            (double)selectionRectangle.GetValue(Canvas.LeftProperty),
            (double)selectionRectangle.GetValue(Canvas.TopProperty),
            selectionRectangle.Width,
            selectionRectangle.Height);
    }
    #endregion

    #region Mutator's
    // Return a HitType value to indicate what is at the point.
    private HitType SetHitType(Rectangle rect, Point point)
    {
        double left = Canvas.GetLeft(selectionRectangle);
        double top = Canvas.GetTop(selectionRectangle);
        double right = left + selectionRectangle.Width;
        double bottom = top + selectionRectangle.Height;

        //statement that checks if cursor is outside the area of the crop rectangle
        //and returns HitType.None.
        if (point.X < left) return HitType.None;
        if (point.X > right) return HitType.None;
        if (point.Y < top) return HitType.None;
        if (point.Y > bottom) return HitType.None;

        const double GAP = 10;  //sets the gap which when mouse over a cursor change is triggered

        //statement that checks where the mouse is located within the rectangle.
        if (point.X - left < GAP)
        {
            // Left edge.
            if (point.Y - top < GAP) return HitType.UL;
            if (bottom - point.Y < GAP) return HitType.LL;
            return HitType.L;
        }
        if (right - point.X < GAP)
        {
            // Right edge.
            if (point.Y - top < GAP) return HitType.UR;
            if (bottom - point.Y < GAP) return HitType.LR;
            return HitType.R;
        }
        if (point.Y - top < GAP) return HitType.T;
        if (bottom - point.Y < GAP) return HitType.B;
        return HitType.Body;
    }

    // Set a mouse cursor appropriate for the current hit type.
    private void SetMouseCursor()
    {
        // See what cursor we should display.
        Cursor desired_cursor = Cursors.Arrow;
        switch (MouseHitType)
        {
            case HitType.None:
                desired_cursor = Cursors.Arrow;
                break;
            case HitType.Body:
                desired_cursor = Cursors.ScrollAll;
                break;
            case HitType.UL:
            case HitType.LR:
                desired_cursor = Cursors.SizeNWSE;
                break;
            case HitType.LL:
            case HitType.UR:
                desired_cursor = Cursors.SizeNESW;
                break;
            case HitType.T:
            case HitType.B:
                desired_cursor = Cursors.SizeNS;
                break;
            case HitType.L:
            case HitType.R:
                desired_cursor = Cursors.SizeWE;
                break;
        }

        // Display the desired cursor.
        if (BackPanel.Cursor != desired_cursor) 
            BackPanel.Cursor = desired_cursor;
    }
    #endregion
}

Crop Control XAML:

     <UserControl.Resources>
    <Storyboard x:Key="MarchingAnts">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                           Storyboard.TargetName="selectionRectangle" 
                           Storyboard.TargetProperty="(Shape.StrokeDashOffset)" 
                           RepeatBehavior="Forever">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
                           Value="10"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource MarchingAnts}"/>
    </EventTrigger>
</UserControl.Triggers>
<Canvas Name="BackPanel" Background="Transparent" MouseLeftButtonDown="LoadedImage_MouseLeftButtonDown" MouseMove="LoadedImage_MouseMove" MouseLeftButtonUp="LoadedImage_MouseLeftButtonUp">
    <Rectangle Name="selectionRectangle" Stroke="#FFFFFFFF"
               StrokeThickness="1" StrokeDashOffset="0" 
               Fill="#220000FF" Visibility="Collapsed"
               StrokeDashArray="5"/>
</Canvas>

Sorry for the confusion but i changed my explanation. The rectangle don't go out of bounds when drawn but only happens if the drawn rectangle is moved. Also the exception is caught in my view model's crop method which is shown below:

     public void Crop()
    {
        ////Get a copy of the selection in case it changes during execution
        Rect cropSelection = Selection;
        //// use it to crop your image
        Int32Rect rcFrom = new Int32Rect();
        rcFrom.X = (int)((cropSelection.X) * (ImagePath.Width) / (ImagePath.Width));
        rcFrom.Y = (int)((cropSelection.Y) * (ImagePath.Height) / (ImagePath.Height));
        rcFrom.Width = (int)cropSelection.Width;
        rcFrom.Height = (int)cropSelection.Height;

        try
        {
            BitmapSource bs = new CroppedBitmap(ImagePath as BitmapSource, rcFrom);
            CroppedImage = bs;

        }
        catch (Exception e)
        {
            MessageBox.Show("Selection Rectangle is outside the image." + "\n" + "Adjust the cropping rectangle so it's within the boundaries of the Image ", " Error Message", MessageBoxButton.OK, MessageBoxImage.Error);
        }
    }

Update:

I was able to get it working by calculating the size and position of the selection rectangle against its parent (Canvas) which takes takes the same size as the image. Below is what I added to my code.

       double bottom = new_y + selectionRectangle.Height;
                double right = new_x+selectionRectangle.Width;
                if (new_y< 0)
                    new_y = 0;
                if (new_x < 0)
                    new_x = 0;
                if (bottom > BackPanel.ActualHeight)
                    new_y = BackPanel.ActualHeight-selectionRectangle.Height;
                if (right > BackPanel.ActualWidth)
                    new_x = BackPanel.ActualWidth - selectionRectangle.Width;
                if (new_height > BackPanel.ActualHeight)
                    new_height = BackPanel.ActualHeight;
                if (new_width > BackPanel.ActualWidth)
                    new_width = BackPanel.ActualWidth;

The new_height and new_width was added because an exception is still thrown if the rectangle occupies the entire image.

Answer 1

If i correctly understood question - you shows message to the user when selection rect goes outside of image rect? If so, why not check that: if new selection state will out of image area - then just not move selection and keep it in old state? I mean - compare borders positions of new selection rect with image rect and make decision: move or not your selection rect in new position (or change or not it's size).