Как построить лупу в WPF C # 4.0? - PullRequest
Новая
       46

Как построить лупу в WPF C # 4.0?

6 голосов
/ 16 июля 2011

У меня получилось большое изображение, и мне нужен увеличенный фрагмент того, что находится под курсором пользователя.

Мое изображение находится в сетке и определяется в 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);

Показывает правильное изображение, увеличенное, но не отображает область изображения под моим курсором.

Заранее спасибо.

Ответы [ 2 ]

8 голосов
/ 19 июля 2011

Поскольку я не нашел ни одного упакованного решения, я с нуля разработал полнофункциональный увеличитель Microsoft Project 2010 Zoom C # 4.0 WPF.

Включает увеличение, уменьшение, поворот, подгонку по ширине и увеличенной области.

Не стесняйтесь загружать, и сделайте это еще лучше.

Лупа WPF 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;

    }
0 голосов
/ 17 июля 2011

К вашему сведению: я никогда ничего не делал с 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;
...