[UWP]使用滚动查看器从图像中心缩放？ [英] [UWP] Zoom from center of image using scroller viewer?

问题描述

我们一直在为UWP应用中的图片实现缩放。我们使用scrollviewer来缩放图像。 

We have been implementing zoom for the image in UWP app. We have used scrollviewer to zoom the image. 

<ScrollViewer x:Name="imageView_scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" MinZoomFactor="1" MaxZoomFactor="2" ZoomMode="Enabled">
       <Image x:Name="editImage" HorizontalAlignment="Center" VerticalAlignment="Center" Width= "{Binding EditImageWidth}" Height="{Binding EditImageHeight}" >
       </Image>
</ScrollViewer>

当我将鼠标指针放在图像的中心或图像的其他位置时，执行ctrl  +鼠标滚轮仅从鼠标指针点开始缩放图像（它使鼠标指针指向焦点和缩放）。它工作正常。现在，我也有一个滑块
，我可以使用它来缩放图像。设置缩放系数实际上会缩放图像，但始终从焦点的左上角缩放。 

When I place my mouse pointer in the center of image or somewhere else on image, doing ctrl  + mouse wheel starts zooming image from the mouse pointer point only(it keeps mouse pointer point in focus and zoom). It works fine. Now, I have a slider too using which I can zoom the image. Setting zoom factor actually zooms the image but is always zooms the from top-left corner in focus. 

滑块：

private void ZoomSliderValueChanged(object sender, Windows.UI.Xaml.Controls.Primitives.RangeBaseValueChangedEventArgs e)
{
            double convertedZoomValuetoProperScale = ViewModel().CurrentZoomValue / 10.0f;
            imageView_scroller.ChangeView(null, null, 1 + (float)convertedZoomValuetoProperScale);
}

我想缩放，就像鼠标指针位于中心位置一样图像正在缩放。我想像图像中的中心缩放功能，就像我们在照片中一样。我能以某种方式实现这一目标吗？ 

I want to zoom as if mouse pointer is in center and image is zooming. I want the center zoom functionality for the image like we have in photos too. Can I achieve this thing somehow? 

谢谢。 

推荐答案

< a name ="x_x__Hlk505355355"> Hi
Adob​​e Systems Incorporated，

>>我想缩放，好像鼠标指针在中心，图像正在缩放。我想要
图像的中心缩放功能，就像我们在照片中一样。

从你的话来说，你想使用滑块来缩放图像，图像有一个中心点，我是对的吗？

ScrollViewer.ChangeView（）
方法有tw o名为horizo​​ntalOffset和verticalOffset的参数。当您需要缩放图像时， 您可以设置方法的偏移量，内容将滚动到您想要的位置。

我用你的代码做了一个简单的演示：

        private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
        {

            double convertedZoomValuetoProperScale = imageView_scroller.ZoomFactor;

            var height = imageView_scroller.ExtentHeight;

            var Width = imageView_scroller.ExtentWidth;

            imageView_scroller.ChangeView(Width / 2, height / 2, 1 + (float)MySlider.Value/10);

        }

   

您可能需要调整高度和宽度以调整图像大小。

最好的问候，

Roy

这篇关于[UWP]使用滚动查看器从图像中心缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！