사각형을 사용하여 이미지에 검색 영역 만들기

Question

이미지를 표시하는 이미지 뷰어가 있습니다. 이미지 위에 마우스를 사용하여 사각형을 그리고 사각형 (x1, x2, y1 및 y2)의 x 및 y 좌표를 가져 오려고합니다. 이 좌표를 사용하여 검색 영역을 만들고 두 축의 이미지와 정확한 픽셀 수를 갖는 배열의 최대 값과 최소값을 찾습니다.
나를 시작할 수있는 방향으로 안내 할 수있는 사람이 있습니까?

Answer 1

캔버스를 사용하여 이미지를 표시하고 그 위에 사각형을 그려야합니다.

예 :

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. 

     } 
    } 

} 

캔버스 영역에 마우스 위치가 포함되어 있는지 여부를 확인하는 표현식

Answer 2

감사합니다. ters 및 help : 여기 내 완성 된 코드이며 작동합니다. 마우스를 캔버스 위 아무 곳에 나 올려 놓고 마우스를 누른 채 드래그하여 사각형을 만듭니다. 어떤 방향으로도 사각형을 드래그하여 만들 때 좀 더 개선 할 수 있습니다.

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> 

코드 :

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; 
}