WPF图像控制中的鼠标处理答案

【问题标题】：Mouse Handling on Image Control of WPFWPF图像控制中的鼠标处理
【发布时间】：2018-06-20 04:19:09
【问题描述】：

我在WPF 中很菜鸟。我正在创建一个WPF 应用程序并为image Processing 使用EmguCV 库。我发现我不能在WPF 中使用ImageBox。所以我使用NamedWindow 显示image 然后我决定使用Image Control 显示window 上的图像。我正在尝试在image 上绘制rectangle，但在其他地方未绘制矩形。所以谁能告诉我代码有什么问题。

基本上我想获取该图像的 ROI。

编辑：- 我把Canvas放在grid里面，把Image Control放在Canvas里面

**我的 XAML 代码**

<Grid Margin="0,0,2,-1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="138*"/>
        <ColumnDefinition Width="139*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="button" Content="Convert" Margin="139.053,432.066,0,0" Click="button_Click" Height="27.934" VerticalAlignment="Top" HorizontalAlignment="Left" Width="113.947" Grid.Column="1"/>
    <Button x:Name="button1" Content="Load Palette" Margin="308,432.066,0,0" Click="button1_Click_1" Height="27.934" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" Grid.ColumnSpan="2"/>
    <Button x:Name="button2" Content="Load Gray Image" Margin="48,432.066,0,0" Click="button2_Click" Height="27.934" VerticalAlignment="Top" HorizontalAlignment="Left" Width="104"/>

    <Canvas x:Name="MyCanvas" Margin="81,86.5,27.245,120.5" Grid.Column="1">
        <Image x:Name="image3" Height="263" Width="238"/>
    </Canvas>
    <Image x:Name="image1" HorizontalAlignment="Left" Height="263" Margin="10,86.5,0,0" VerticalAlignment="Top" Width="255.5"/>
    <Image x:Name="image2" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="393" Margin="308,10,0,0" VerticalAlignment="Top" Width="75"/>
</Grid>

我的 C# 代码是

        private Boolean isdragging = false;
        private System.Windows.Point startPoint;
        private System.Windows.Point endPoint;
        private System.Windows.Shapes.Rectangle rect;  
   private void image3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        startPoint = e.GetPosition(MyCanvas);
        isdragging = true;
        if(rect != null)
            MyCanvas.Children.Remove(rect);
        rect = new System.Windows.Shapes.Rectangle
        {
            Stroke = System.Windows.Media.Brushes.LightBlue,
            StrokeThickness = 2
        };
        System.Windows.Controls.Canvas.SetLeft(rect, startPoint.X);
        System.Windows.Controls.Canvas.SetTop(rect, startPoint.Y);
        MyCanvas.Children.Add(rect);
    }

    private void image3_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        rect = null;
        isdragging = false;
        endPoint = e.GetPosition(MyCanvas);
    }
    private void image3_MouseMove(object sender, MouseEventArgs e)
    {
        if (isdragging == true)
        {
            var pos = e.GetPosition(MyCanvas);
            var x = Math.Min(pos.X, startPoint.X);
            var y = Math.Min(pos.Y, startPoint.Y);
            var w = Math.Max(pos.X, startPoint.X) - x;
            var h = Math.Max(pos.Y, startPoint.Y) - y;
            rect.Width = w;
            rect.Height = h;
            System.Windows.Controls.Canvas.SetLeft(rect, x);
            System.Windows.Controls.Canvas.SetTop(rect, y);
        }
    }

我在Canvas 上使用Event Handler，但它没有显示rectangle

提前致谢

【问题讨论】：

熟悉WPF layout。不要使用边距来定位元素。相反，将它们放在 Canvas 中，并设置它们的 Width 和 Height 以及它们的 Canvas.Left 和 Canvas.Top 属性。
我试过这个我正在编辑问题。
我知道我在这段代码中犯了一些错误，基本上它没有显示任何矩形

标签： c# wpf emgucv

【解决方案1】：

感谢 Clemens，我得到了答案，实际上我还没有将事件处理程序添加到 image3 Image Control，这就是它没有显示输出的原因。

<Canvas x:Name="MyCanvas" Margin="81,86.5,27.245,120.5" Grid.Column="1">
    <Image x:Name="image3" Height="263" Width="238" MouseLeftButtonDown="image3_MouseLeftButtonDown" MouseLeftButtonUp="image3_MouseLeftButtonUp" MouseMove="image3_MouseMove"/>
</Canvas>

【讨论】：