[英]How to build a Magnifier in WPF C# 4.0?
我有一個很大的圖像,需要用戶 cursor 下的內容的縮放部分。
我的圖像在網格內,並以這種方式在 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>
我有一個放大的區域,應該在我的 cursor 下顯示 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>
現在,在 my.CS 代碼中,我有 function 應該顯示放大的圖像:
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);
它顯示正確的圖像,放大,但它不顯示我的 cursor 下的圖像區域。
提前致謝。
由於我沒有找到任何打包的解決方案,我從頭開始開發了一個功能齊全的 Microsoft VS 2010 Project Magnifier Zoom C# 4.0 WPF。
它包括放大、縮小、旋轉、適合寬度和放大區域。
隨意下載,讓它變得更好。
希望你喜歡。 覺得有用就投票吧。
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;
}
僅供參考:我從未對 WPF 做過任何事情,我借此機會學習。 這是我的解決方案:
首先,我禁用了兩個圖像的拉伸: Stretch="None" 並刪除了圖像上的高度和寬度定義。
然后,后面的代碼是:
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.