c# - 使用 MouseMove 事件在 Canvas 内移动动态绘制的矩形

Question

我正在尝试在 Canvas 内移动一个动态绘制的矩形。我能够在 Canvas 中动态绘制矩形，但在尝试在 Canvas 内移动矩形时我遇到了问题

XAML:

   <Grid x:Name="Gridimage1" Margin="0,0,411,100">
      <Image Name="image1" HorizontalAlignment="Left" Stretch="Fill" VerticalAlignment="Top"></Image>
        <Canvas x:Name="BackPanel" Margin="20,67,0,0" Height="317" Width="331">
           <Rectangle x:Name="selectionRectangle" Stroke="LightBlue" Fill="#220000FF"/>
        </Canvas>
   </Grid>

C#:

动态绘制矩形后，我添加了以下鼠标事件。

selectionRectangle.MouseLeftButtonDown += new MouseButtonEventHandler(Rect1_MouseDown);
selectionRectangle.MouseMove += new MouseEventHandler(Rectangle_MouseMove_1);
selectionRectangle.MouseUp += new MouseButtonEventHandler(Rect1_MouseUp); 
     # region "rectangle move"
    private bool drag = false;
    private Point startPt;
    private int wid;
    private int hei;
    private Point lastLoc;
    private double CanvasLeft, CanvasTop;
    private void Rect1_MouseDown(object sender, MouseButtonEventArgs e)
    {
        drag = true;
        Cursor = Cursors.Hand;
        startPt = e.GetPosition(BackPanel);
        wid = (int)selectionRectangle.Width;
        hei = (int)selectionRectangle.Height;
        lastLoc = new Point(Canvas.GetLeft(selectionRectangle), Canvas.GetTop(selectionRectangle));
       Mouse.Capture((IInputElement)sender);
    }

    private void Rectangle_MouseMove_1(object sender, MouseEventArgs e)
    {
        try
        {
            if (drag)
            {
                    var newX = (startPt.X + (e.GetPosition(BackPanel).X - startPt.X));
                    var newY = (startPt.Y + (e.GetPosition(BackPanel).Y - startPt.Y));
                    Point offset = new Point((startPt.X - lastLoc.X), (startPt.Y - lastLoc.Y));
                    CanvasTop = newY - offset.Y;
                    CanvasLeft = newX - offset.X;
                    selectionRectangle.SetValue(Canvas.TopProperty, CanvasTop);
                    selectionRectangle.SetValue(Canvas.LeftProperty, CanvasLeft);               

            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);    
        }

    }
    private void Rect1_MouseUp(object sender, MouseButtonEventArgs e)
    {
        drag = false;
        Cursor = Cursors.Arrow;
        Mouse.Capture(null);
    }
    #endregion

问题:我可以在整个窗口中移动矩形。我只想移动 Canvas 边距内的矩形。

我可以将矩形移出 Canvas

Answer 1

您应该能够获取 selectionRectangle 的 Bounds 并查看它们是否超过 Canvas 的 Width 和/或 Height提交拖动操作。

selectionRectangle.MouseMove += new MouseEventHandler(Rectangle_MouseMove_1);

private bool drag = false;
private Point startPt;
private int wid;
private int hei;
private Point lastLoc;
private double CanvasLeft, CanvasTop;

private void Rectangle_MouseMove_1(object sender, MouseEventArgs e)
{
    try
    {
        if (drag)
        {
                var newX = (startPt.X + (e.GetPosition(BackPanel).X - startPt.X));
                var newY = (startPt.Y + (e.GetPosition(BackPanel).Y - startPt.Y));
                Point offset = new Point((startPt.X - lastLoc.X), (startPt.Y - lastLoc.Y));
                CanvasTop = newY - offset.Y;
                CanvasLeft = newX - offset.X;

                // check if the drag will pull the rectangle outside of it's host canvas before performing
                // TODO: protect against lower limits too...
               if ((CanvasTop + selectionRectangle.Height > BackPanel.Height) || (CanvasLeft + selectionRectangle.Width > BackPanel.Width) || CanvasTop < 0 || CanvasLeft < 0)
                    {
                        return;
                    }
                selectionRectangle.SetValue(Canvas.TopProperty, CanvasTop);
                selectionRectangle.SetValue(Canvas.LeftProperty, CanvasLeft);               

        }
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.Message);    
    }

}