当拉伸设置为均匀时图像控制和图像调整

Question

我有个特殊的问题。我有一个用户控件。我正在为Windows8.1制作一个应用程序，在那里我会从我的图片库中选择一张图片。该图像将在我的应用程序开放与拉伸是均匀的，水平和垂直对中。

我的用户控件将出现在我点击图像的地方。现在的问题是，当图像拉伸为零时，我能够放大正确的区域(围绕我的点击)，但现在，当我将拉伸设置为Uniform，并将水平和垂直对齐设置为中心时，我将在用户控件中获取其他像素信息。

我想知道如何修复it.Any如何，图像可以是2*全高清也可以，他们可以是高清甚至更少。其次，我想知道图像的边界。有了边界，我想说，我的用户控件不应该超出图像的边界。如何实现这一点。如果需要我的代码，我会粘贴它，如果需要的话。

以这个视频作为参考。这就是我要发展的！我已经准备好了用户控件，我得到了Stretch=NONE的精确像素，没有水平和垂直对齐设置。

这是我的应用程序代码

Answer 1

我认为问题在于你如何使用控制，而不是图像。如果您避免进行位图裁剪和替换，那么它将大大加快所有拉伸类型的工作速度。

我已经修改了源代码以显示--完全删除裁剪。如果出于其他原因需要裁剪，则应考虑使用不安全关键字(以及属性设置允许)，以显著加快其使用速度。

此外，为了避免滞后/向上跳跃，我添加了IsHitTestVisible="False“，这样您的增量就不会被悬停在图像上而中断。

我看到你已经有了45度的代码--因为它不在你的源代码中，所以我只添加了一个90度旋转的例子，当你到达两边的时候-所以你可以看到如何设置一个RenderTransformOrigin点。

MainPage.xaml：

<Page x:Name="page1" 
    x:Class="controlMagnifier.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="ParentGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" PointerReleased="ParentGrid_OnPointerReleased"  >
        <Canvas x:Name="InkPresenter" Height="auto" Width="auto">

            <Image Stretch="Uniform" x:Name="image2"  >
                <Image.Source >
                    <BitmapImage UriSource="/Assets/wallpaper.jpg" />
                </Image.Source>
            </Image>

        </Canvas>

        <local:MagnifierUsercontrol  x:Name="MagnifyTip"  Visibility="Collapsed"  ManipulationMode="All"
                                     IsHitTestVisible="False" Height="227" Width="171"
                                     VerticalContentAlignment="Bottom" HorizontalContentAlignment="Center">
        </local:MagnifierUsercontrol>
    </Grid>
</Page>

MainPage.xaml.cs：

using System;
using Windows.Foundation;
using Windows.Storage;
using Windows.UI.Input;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace controlMagnifier
{
    public sealed partial class MainPage : Page
    {
        public const int XAxis = 200;
        public const int YAxis = 435;
        private readonly RotateTransform myRotateTransform = new RotateTransform {CenterX = 0.5, CenterY = 1};
        private readonly ScaleTransform myScaleTransform = new ScaleTransform {ScaleX = 1, ScaleY = 1};
        private readonly TransformGroup myTransformGroup = new TransformGroup();
        private readonly TranslateTransform myTranslateTransform = new TranslateTransform();
        public WriteableBitmap CurrentBitmapObj, CurrentCroppedImage = null;
        public Point currentContactPt, GridPoint;
        public Thickness margin;
        public PointerPoint pt;
        public double xValue, yValue;

        public MainPage()
        {
            InitializeComponent();
            ParentGrid.Holding += Grid_Holding;
            image2.PointerMoved += InkCanvas_PointerMoved;
            image2.PointerReleased += ParentGrid_OnPointerReleased;
            margin = MagnifyTip.Margin;
            image2.CacheMode = new BitmapCache();

            myTransformGroup.Children.Add(myScaleTransform);
            myTransformGroup.Children.Add(myRotateTransform);
            myTransformGroup.Children.Add(myTranslateTransform);

            MagnifyTip.RenderTransformOrigin = new Point(0.5, 1);
            MagnifyTip.RenderTransform = myTransformGroup;
        }

        private void Grid_Holding(object sender, HoldingRoutedEventArgs e)
        {
            try
            {
                GridPoint = e.GetPosition(image2);

                myTranslateTransform.X = xValue - XAxis;
                myTranslateTransform.Y = yValue - YAxis;
                MagnifyTip.RenderTransform = myTransformGroup;

                MagnifyTip.Visibility = Visibility.Visible;
            }
            catch (Exception)
            {
                throw;
            }
        }

        private void InkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            try
            {
                pt = e.GetCurrentPoint(image2);
                currentContactPt = pt.Position;

                xValue = currentContactPt.X;
                yValue = currentContactPt.Y;

                if (xValue > 300)
                {
                    myRotateTransform.Angle = -90;
                }
                else if (xValue < 100)
                {
                    myRotateTransform.Angle = 90;
                }
                else
                {
                    myRotateTransform.Angle = 0;
                }

                MagnifyTip.RenderTransform = myRotateTransform;

                myTranslateTransform.X = xValue - XAxis;
                myTranslateTransform.Y = yValue - YAxis;
                MagnifyTip.RenderTransform = myTransformGroup;
            }
            catch (Exception)
            {
                throw;
            }

            finally
            {
                e.Handled = true;
            }
        }

        private async void StoreCrrentImage()
        {
            try
            {
                var storageFile =
                    await
                        StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/wallpaper.jpg",
                            UriKind.RelativeOrAbsolute));

                using (
                    var fileStream =
                        await storageFile.OpenAsync(FileAccessMode.Read))
                {
                    var bitmapImage = new BitmapImage();

                    await bitmapImage.SetSourceAsync(fileStream);
                    var writeableBitmap =
                        new WriteableBitmap(bitmapImage.PixelWidth, bitmapImage.PixelHeight);
                    fileStream.Seek(0);
                    await writeableBitmap.SetSourceAsync(fileStream);
                    CurrentBitmapObj = writeableBitmap;
                    writeableBitmap.Invalidate();
                }
            }
            catch (Exception)
            {
                // Graphics g=new Graphics();
                throw;
            }


            finally
            {
            }
        }

        private void ParentGrid_OnPointerReleased(object sender, PointerRoutedEventArgs e)
        {
            MagnifyTip.Visibility = Visibility.Collapsed;
        }
    }
}

MagnifierUsercontrol.xaml：

<UserControl
    x:Class="controlMagnifier.MagnifierUsercontrol"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:controlMagnifier"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="227" Width="171">

    <Canvas x:Name="controlCanvas" x:FieldModifier="public"  Height="Auto" Width="Auto" >
        <Grid Height="227" Width="171" HorizontalAlignment="Center" Canvas.Left="0" Canvas.Top="0">

            <Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
                <Border.Background>
                    <ImageBrush x:FieldModifier="public" x:Name="image1"    />
                </Border.Background>
            </Border>

            <TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red"  FontSize="20" Text="ABC" TextAlignment="Center" />
            <!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
            <Path x:Name="MagnifyTip"  Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338    c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33    C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328    c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
        </Grid>
    </Canvas>

</UserControl>

让我知道这是否有帮助，或是否有进一步的您的具体问题。