如何在WPF C＃4.0中構建放大鏡？

Question

我有一個圖像變得很大，需要放大用戶光標下的部分。

我的形象是一個網格內，並在XAML中這樣定義：

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

我有我的光標放大2倍以下，其中應該出現在圖像的縮放區域。

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

現在，我.CS代碼我已經得到了應顯示放大的圖像功能：

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; 

    } 

我怎樣才能找到那些正確的價值「?????? ??」

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

它顯示正確的圖像，縮放，但它不顯示我的光標下的圖像區域。

在此先感謝。

Answer 1

因爲我沒有找到任何包裝的解決方案，我從頭開發一個全功能的微軟VS 2010項目放大鏡放大C＃4.0 WPF。

它包括放大，縮小，旋轉，適合寬度和放大區域。

隨意下載，並使其更好。

WPF Magnifier C# 4.0

希望您能喜歡。如果你覺得它有用，請投票。

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

僅供參考：我從來沒有對WPF做過任何事情，我藉此機會學習。這是我的解決方案：

首先，我禁用拉伸兩個圖像：拉伸=「無」，並刪除圖像的高度和寬度的定義。

然後，後面的代碼是：

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;