CODEWITHSUNDEEP
c#wpfdrawing
user1094315
user1094315

Reputation: 95

Using a rectangle to create a search region on an image

I have an Image viewer that displays an image. I want to draw a rectangle using the mouse over the image and get the x and y coordinates of the rectangle (X1, X2, Y1, and Y2). I will use these coordinates to create a search region and find the max and min values in an array that have the exact number of pixels as the image in both axes.
Can anyone guide me to a direction to start please?

Upvotes: 3

Views: 2902

Answers (2)

user1094315
user1094315

Reputation: 95

Thanks for the pointers and help: Here is my finished code and it works. You place the mouse anywhere on the canvas hold mouse down and drag to create the rectangle. It could use some more improvement to drag and create the rectangle in any direction.

XAML:

<Canvas Name="ImageCanvas"
           MouseMove="ImageCanvas_MouseMove"
               MouseDown="ImageCanvas_MouseDown"
           Height="240" Width="320"
           HorizontalAlignment="Left"
           Margin="87,514,0,0"  VerticalAlignment="Top" MouseLeftButtonUp="ImageCanvas_MouseLeftButtonUp">
           <Canvas.Background>
           <ImageBrush x:Name="Image" Stretch="Uniform" ImageSource="C:\image.bmp">
           </ImageBrush>
           </Canvas.Background>
           <Rectangle x:Name="ROI" Stroke="#FFF1133E"  Width="20" Height="20" Canvas.Left="155" Canvas.Top="115" />

       </Canvas>

Code:

double topLeftX = 0;
double topLeftY = 0;
double bottomRightX = 0;
double bottomrigthY = 0;
bool setRect = false;

private void ImageCanvas_MouseDown(object sender, MouseButtonEventArgs e)
{
    topLeftY = topLeftX = bottomrigthY = bottomRightX = 0;
    setRect = true;
    System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
    topLeftX = pt.X; topLeftY = pt.Y;
}

private void ImageCanvas_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
    if (setRect == true)
    {
        //get mouse location relative to the canvas
        System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
        Canvas.SetLeft(ROI, topLeftX);
        Canvas.SetTop(ROI, topLeftY);
        ROI.Width = System.Math.Abs((int)(pt.X - topLeftX));
        ROI.Height = System.Math.Abs((int)(pt.Y - topLeftY));
        commandReturnTB.Text = (Convert.ToString(pt.X) + "," + Convert.ToString(pt.Y))+"\n";  
    }
}

private void ImageCanvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    System.Windows.Point pt = e.MouseDevice.GetPosition(sender as Canvas);
    bottomRightX = pt.X;
    bottomrigthY = pt.Y;
    ROI.Width = System.Math.Abs((int)(bottomRightX - topLeftX));
    ROI.Height = System.Math.Abs((int)(bottomrigthY - topLeftY));
    Canvas.SetLeft(ROI, topLeftX);
    Canvas.SetTop(ROI, topLeftY);
    setRect = false;
    commandReturnTB.Text = topLeftX + "," + topLeftY + "--" + bottomRightX + "," + bottomrigthY;
}

Upvotes: 1

Seffix
Seffix

Reputation: 1049

You should use a canvas to display the image and draw a rectangle over it.

Example:

MainWindow.xaml:

<Window x:Class="CanvasRectangleSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow">
    <Grid>
        <Canvas x:Name="SampleImageCanvas" 
                MouseMove="SampleImageCanvas_MouseMove" 
                MouseDown="SampleImageCanvas_MouseDown"
                Width="512" Height="389"> 
            <Canvas.Background>
                <!--Here you set the image to display -> You probably want to bind it to something. -->
                <ImageBrush x:Name="SampleImage" Stretch="Uniform" ImageSource="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg">
                </ImageBrush>
            </Canvas.Background>
            <!-- Here you draw whatever you want on the canvas. -->
            <!-- You'll probably want to bind its width and height to something too. -->
            <Rectangle x:Name="ROI" Stroke="#FFF1133E"  Width="50" Height="50"/>
        </Canvas>
    </Grid>
</Window>

MainWindow.xaml.cs:

using System.Windows;
using System.Windows.Input;
using System.Windows.Controls;
namespace CanvasRectangleSample
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.DataContext = this;
            InitializeComponent();
        }

        // Handling the redrawing of the rectangle according to mouse location
        private void SampleImageCanvas_MouseMove(object sender, MouseEventArgs e)
        {
            //get mouse location relative to the canvas
            Point pt = e.MouseDevice.GetPosition(sender as Canvas);

            //here you set the rectangle loction relative to the canvas
            Canvas.SetLeft(ROI, pt.X - (int)(ROI.Width / 2));
            Canvas.SetTop(ROI, pt.Y - (int)(ROI.Height / 2));
        }


        private void SampleImageCanvas_MouseDown(object sender, MouseButtonEventArgs e)
        {
            //Here you should handle saving the rectangle location

            //don't forget to calculate the proportion between Canvas's size and real Image's size.

        }
    }

}

If you want you can limit the rectangle relocation to the canvas area with an if expression checking if the canvas area containes the mouse locaion

Upvotes: 2

Related Questions