Làm thế nào để xây dựng một kính lúp trong WPF C# 4.0?

Question

Tôi có hình ảnh được hiển thị lớn và cần một phần được thu nhỏ về những gì dưới con trỏ của người dùng.

Hình ảnh của tôi là bên trong một lưới điện và được định nghĩa trong XAML theo cách này:

<Grid x:Name="RootImgGrid" Background="#FF333333" > 
    <Viewbox x:Name="imgViewBox" Margin="1,1,1,1" Stretch="Fill" > 
     <Canvas x:Name="imgCanvas" ClipToBounds="True" Width="{Binding ElementName=RootImgGrid, Path=ActualWidth}" Height="{Binding ElementName=RootImgGrid, Path=ActualHeight}"> 
      <Image x:Name="imgObj" MouseWheel="img_MouseWheel" Cursor="Hand" MouseMove="Img_MouseMove" MouseDown="Img_MouseDown" MouseUp="Img_MouseUp" > 
       <Image.RenderTransform> 
        <TransformGroup x:Name="imgTransformGroup"> 
         <ScaleTransform x:Name="imgScaleTransform"></ScaleTransform> 
         <TranslateTransform x:Name="imgTranslateTransform"></TranslateTransform> 
        </TransformGroup> 
       </Image.RenderTransform> 
       <Image.LayoutTransform> 
        <RotateTransform x:Name="imgRotateTransform"></RotateTransform> 
       </Image.LayoutTransform> 
      </Image> 
     </Canvas> 
    </Viewbox> 
</Grid> 

Và tôi có một khu vực zoom nơi sẽ xuất hiện hình ảnh dưới con trỏ của tôi thu nhỏ 2x.

<Viewbox x:Name="imgViewBoxMagnifier" Width="400" Height="90"> 
    <Canvas x:Name="imgCanvasMagnifier" Width="400" Height="90"> 
     <Canvas.Clip> 
      <RectangleGeometry Rect="0,0,400,90" /> 
     </Canvas.Clip> 
     <Image x:Name="imgMagnifier" Margin="2" Width="400" Height="90"> 
      <Image.RenderTransform> 
       <TransformGroup x:Name="imgMagnifierTransformGroup"> 
        <ScaleTransform x:Name="imgMagnifierScaleTransform"></ScaleTransform> 
        <TranslateTransform x:Name="imgMagnifierTranslateTransform"></TranslateTransform> 
       </TransformGroup> 
      </Image.RenderTransform> 
      <Image.LayoutTransform> 
       <RotateTransform x:Name="imgMagnifierRotateTransform"></RotateTransform> 
      </Image.LayoutTransform> 
     </Image> 
    </Canvas> 
</Viewbox> 

Bây giờ, trong mã .cs của tôi, tôi đã có những chức năng đó sẽ hiển thị hình ảnh thu nhỏ:

public void Magnifier(Canvas imgCanvas, Image imgObject, Image imgMagnifier, MouseEventArgs e) 
    { 
     Int32 width = 400; 
     Int32 height = 90; 

     if (imgMagnifier.Source != imgObject.Source) 
     { 
      imgMagnifier.Source = imgObject.Source; 
     } 

     Size size = imgObject.RenderSize; 
     RotateTransform rt = (RotateTransform)imgObject.LayoutTransform; 
     TranslateTransform tt = (TranslateTransform)((TransformGroup)imgObject.RenderTransform).Children[1]; 
     ScaleTransform st = (ScaleTransform)((System.Windows.Media.TransformGroup)(imgObject.RenderTransform)).Children[0]; 
     Double x = e.GetPosition(imgCanvas).X - tt.X; 
     Double y = e.GetPosition(imgCanvas).Y - tt.Y; 
     Point pos = e.MouseDevice.GetPosition(imgCanvas); 

     TransformGroup transformGroup = new TransformGroup(); 
     ScaleTransform scale = new ScaleTransform(); 

     scale.CenterX = x; 
     scale.CenterY = y; 
     scale.ScaleX = st.ScaleX * 10; 
     scale.ScaleY = st.ScaleY * 10; 
     transformGroup.Children.Add(scale); 

     TranslateTransform translate = new TranslateTransform(); 
     translate.X = ??????????????????; 
     translate.Y = ??????????????????; 
     transformGroup.Children.Add(translate); 

     imgMagnifier.RenderTransform = transformGroup; 

    } 

Làm thế nào tôi có thể tìm thấy giá trị chính xác của những "?????? ?? "

translate.X = -x * 10/(size.Width/400); 
translate.Y = -y * 10/(size.Height/90); 

Nó hiển thị hình ảnh chính xác, được thu nhỏ nhưng không hiển thị khu vực hình ảnh bên dưới con trỏ của tôi.

Xin cảm ơn trước.

Answer 1

Kể từ khi tôi đã không tìm thấy bất kỳ giải pháp đóng gói, tôi đã phát triển từ đầu một đầy đủ chức năng Microsoft VS 2010 Dự án Magnifier Phóng to C# 4.0 WPF.

Nó bao gồm phóng to, thu nhỏ, xoay, vừa với chiều rộng và khu vực phóng to.

Hãy tải xuống và làm cho nó tốt hơn nữa.

WPF Magnifier C# 4.0

Hy vọng bạn sẽ thích. Bình chọn nếu bạn thấy nó hữu ích.

public void Magnifier(Canvas imgCanvas, Image imgObject, Canvas imgCanvasMagnifier, Image imgMagnifier, MouseEventArgs e) 
    { 
     Double width = imgCanvasMagnifier.Width; 
     Double height = imgCanvasMagnifier.Height; 
     Int32 zoom = 3; 

     String txtDebug = String.Empty; 
     String txtZoom = String.Empty; 

     if (imgMagnifier.Source != imgObject.Source) 
     { 
      imgMagnifier.Source = imgObject.Source; 
     } 

     Size size = imgObject.RenderSize; 
     RotateTransform rt = (RotateTransform)imgObject.LayoutTransform; 
     TranslateTransform tt = (TranslateTransform)((TransformGroup)imgObject.RenderTransform).Children[1]; 
     ScaleTransform st = (ScaleTransform)((System.Windows.Media.TransformGroup)(imgObject.RenderTransform)).Children[0]; 
     Double x = e.GetPosition(imgCanvas).X - tt.X; 
     Double y = e.GetPosition(imgCanvas).Y - tt.Y; 
     Point pos = e.MouseDevice.GetPosition(imgCanvas); 
     var wnd = Canvas.GetTop(imgObject); 

     TransformGroup transformGroup = new TransformGroup(); 
     ScaleTransform scale = new ScaleTransform(); 

     scale.ScaleX = st.ScaleX * zoom; 
     scale.ScaleY = st.ScaleY * zoom; 

     RotateTransform rotate = new RotateTransform(); 
     rotate.Angle = rt.Angle; 

     TranslateTransform translate = new TranslateTransform(); 

     Double centerX = st.CenterX * (st.ScaleX - 1); 
     Double centerY = st.CenterY * (st.ScaleY - 1); 

     if (rt.Angle == 0) 
     { 
      translate.X = -(x + centerX)/st.ScaleX; 
      translate.Y = -(y + centerY)/st.ScaleY; 
      scale.CenterX = (x + centerX)/st.ScaleX; 
      scale.CenterY = (y + centerY)/st.ScaleY; 
     } 
     if (rt.Angle == 90) 
     { 
      translate.X = -(x + centerX)/st.ScaleX; 
      translate.Y = -(y + centerY)/st.ScaleY; 
      translate.X += imgObject.ActualHeight * st.ScaleX * zoom; 
      scale.CenterX = (x + centerX)/st.ScaleX; 
      scale.CenterY = (y + centerY)/st.ScaleY; 
     } 

     if (rt.Angle == 180) 
     { 
      translate.X = -(x + centerX)/st.ScaleX; 
      translate.Y = -(y + centerY)/st.ScaleY; 
      translate.X += imgObject.ActualWidth * st.ScaleX * zoom; 
      translate.Y += imgObject.ActualHeight * st.ScaleY * zoom; 
      scale.CenterX = (x + centerX)/st.ScaleX; 
      scale.CenterY = (y + centerY)/st.ScaleY; 
     } 

     if (rt.Angle == 270) 
     { 
      translate.X = -(x + centerX)/st.ScaleX; 
      translate.Y = -(y + centerY)/st.ScaleY; 
      translate.Y += imgObject.ActualWidth * st.ScaleX * zoom; 
      scale.CenterX = (x + centerX)/st.ScaleX; 
      scale.CenterY = (y + centerY)/st.ScaleY; 
     } 

     translate.X += width/2; 
     translate.Y += height/2; 

     transformGroup.Children.Add(rotate); 
     transformGroup.Children.Add(scale); 
     transformGroup.Children.Add(translate); 


     imgMagnifier.RenderTransform = transformGroup; 

    } 

Answer 2

FYI: Tôi chưa từng làm gì với WPF và tôi đã nắm lấy cơ hội này để tìm hiểu. Đây là giải pháp của tôi:

Trước tiên, tôi đã tắt tính năng kéo giãn trên cả hai hình ảnh: Stretch = "None" và xóa các định nghĩa chiều cao và chiều rộng trên hình ảnh.

Sau đó, các mã sau là:

double xFactor = 2, yFactor = 2; 

    Size size = imgObject.RenderSize; 
    Size magSize = new Size(width: imgMagnifier.RenderSize.Width * xFactor, 
          height: imgMagnifier.RenderSize.Height * yFactor); 

    Point pos = e.MouseDevice.GetPosition(imgCanvas); 

    var transformGroup = new TransformGroup(); 
    var scale = new ScaleTransform(); 
    scale.CenterX = 0; 
    scale.CenterY = 0; 
    scale.ScaleX = xFactor; 
    scale.ScaleY = yFactor; 
    transformGroup.Children.Add(scale); 

    var translate = new TranslateTransform(); 
    translate.X = -pos.X * xFactor + imgCanvasMagnifier.Width/2; 
    translate.Y = -pos.Y * yFactor + imgCanvasMagnifier.Height/2; 
    transformGroup.Children.Add(translate); 

    imgMagnifier.RenderTransform = transformGroup;