Question

我有这个特殊的问题。我有一个用户控件。我正在为Windows 8.1制作一个应用程序，我会从我的图片库中选择一个图像。图像将在我的应用程序中打开，Stretch是Uniform and Horizontal和垂直对齐到中心。

我的用户控件将出现在我点按图片的位置。现在的问题是，当图像Stretch为none时，我能够放大正确的区域（在我的点击周围），但现在当我将拉伸变为 Uniform 时将水平和垂直对齐设置为中心，我在用户控件中获取其他像素信息。

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

请将此video作为参考。这就是我必须要发展的！我准备好了用户控件，我得到 Stretch = NONE的精确像素，并且没有设置水平和垂直对齐。

这是我的app

的代码

Answer 1

我认为问题在于你如何使用控件，而不是图像。如果你避免进行位图裁剪和替换，它会显着加速，并且可能适用于所有拉伸类型。

我修改了源代码以显示此信息 - 完全删除了Cropping。如果由于其他原因需要裁剪，则应考虑使用unsafe关键字（以及允许的属性设置），以便大大加快其使用。

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

我看到你已经拥有了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>

请告诉我这是否有帮助，或者是否有进一步针对您的具体问题。

当Stretch设置为Uniform时，图像控制和图像大小调整

1 个答案: