Windows Phone Image Pinch&缩放重置 [英] Windows Phone Image Pinch & Zoom Reset

查看：55 发布时间：2019/6/17 13:58:52 wpdevelop

本文介绍了Windows Phone Image Pinch&缩放重置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用此代码进行捏合和缩放，它正常工作，但我必须双击重置。
$

我的Xaml代码;

&NBSP; < Grid x：Name =" ContentPanel" Grid.Row = QUOT 1 QUOT;保证金="12,0,12,0">

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < ViewportControl x：Name =" viewport"

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP;在ManipulationStarted = QUOT; OnManipulationStarted在"在ManipulationDelta = QUOT; OnManipulationDelta在"

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP;在ManipulationCompleted = QUOT; OnManipulationCompleted在" ViewportChanged =" viewport_ViewportChanged">

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < Canvas x：Name =" canvas">

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < Image x：Name =" TestImage"源= QUOT; /Assets/test.jpg"

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; RenderTransformOrigin = QUOT; 0,0" CacheMode =" BitmapCache"

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; ImageOpened =" OnImageOpened">

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < Image.RenderTransform>

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < ScaleTransform x：Name =" xform" />

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < /Image.RenderTransform>

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / Image>

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / Canvas>

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; < / ViewportControl>

&NBSP; &NBSP; &NBSP; < / Grid>

我的变数：

&NBSP; &NBSP; const double MaxScale = 10;

&NBSP; &NBSP; &NBSP; double _scale = 1.0;

&NBSP; &NBSP; &NBSP; double _minScale;

&NBSP; &NBSP; &NBSP; double _coercedScale;

&NBSP; &NBSP; &NBSP; double _originalScale;

&NBSP; &NBSP; &NBSP;尺寸_viewportSize;

&NBSP; &NBSP; &NBSP; bool _pinching;

&NBSP; &NBSP; &NBSP; Point _screenMidpoint;

&NBSP; &NBSP; &NBSP; Point _relativeMidpoint;

&NBSP; &NBSP; &NBSP; BitmapImage _bitmap;

和我的方法;

&NBSP; &NBSP; &NBSP; void viewport_ViewportChanged（object sender，System.Windows.Controls.Primitives.ViewportChangedEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP;大小newSize = new Size（viewport.Viewport.Width，viewport.Viewport.Height）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（newSize！= _viewportSize）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _viewportSize = newSize;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; CoerceScale（true）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; ResizeImage（false）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; void OnManipulationStarted（object sender，ManipulationStartedEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _pinching = false;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _originalScale = _scale;

&NBSP; &NBSP; &NBSP; }



&NBSP; &NBSP; &NBSP; void OnManipulationDelta（object sender，ManipulationDeltaEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（e.PinchManipulation！= null）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; e.Handled = true;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（！_pinching）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _pinching = true;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; Point center = e.PinchManipulation.Original.Center;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _relativeMidpoint = new Point（center.X / TestImage.ActualWidth，center.Y / TestImage.ActualHeight）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; var xform = TestImage.TransformToVisual（viewport）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _screenMidpoint = xform.Transform（center）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _scale = _originalScale * e.PinchManipulation.CumulativeScale;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; CoerceScale（false）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; ResizeImage（false）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; &NBSP; &NBSP;否则如果（_pinching）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _pinching = false;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _originalScale = _scale = _coercedScale;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; void OnManipulationCompleted（object sender，ManipulationCompletedEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _pinching = false;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _scale = _coercedScale;

&NBSP; &NBSP; &NBSP; }

$
&NBSP; &NBSP; &NBSP; void OnImageOpened（对象发送者，RoutedEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _bitmap =（BitmapImage）TestImage.Source;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _scale = 0;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; CoerceScale（true）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _scale = _coercedScale;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; ResizeImage（true）;

&NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; void ResizeImage（布尔中心）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（_coercedScale！= 0&& _bitmap！= null）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; double newWidth = canvas.Width = Math.Round（_bitmap.PixelWidth * _coercedScale）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; double newHeight = canvas.Height = Math.Round（_bitmap.PixelHeight * _coercedScale）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; xform.ScaleX = xform.ScaleY = _coercedScale;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; viewport.Bounds = new Rect（0,0，newWidth，newHeight）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（center）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; viewport.SetViewportOrigin（

             new Point（

   ;             Math.Round（（newWidth - viewport.ActualWidth）/ 2），

              Math.Round（（newHeight - viewport.ActualHeight）/ 2）

             ））;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP;否则

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; Point newImgMid = new Point（newWidth * _relativeMidpoint.X，newHeight * _relativeMidpoint.Y）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; Point origin = new Point（newImgMid.X - _screenMidpoint.X，newImgMid.Y - _screenMidpoint.Y）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; viewport.SetViewportOrigin（origin）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }¥b $ b &NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; void CoerceScale（bool recompute）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; if（recompute&& _bitmap！= null&& viewport！= null）

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; double minX = viewport.ActualWidth / _bitmap.PixelWidth;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; double minY = viewport.ActualHeight / _bitmap.PixelHeight;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _minScale = Math.Min（minX，minY）;

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; }

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; _coercedScale = Math.Min（MaxScale，Math.Max（_scale，_minScale））;

&NBSP; &NBSP; &NBSP; }

&NBSP; private void imgZoom_DoubleTap（object sender，System.Windows.Input.GestureEventArgs e）

&NBSP; &NBSP; &NBSP; {

&NBSP; &NBSP; &NBSP; &NBSP; &NBSP; //重置视口和图像

&NBSP; &NBSP; &NBSP; }

如何重置我的视口和图像以便将它们用于另一个？

谢谢。

解决方案

您已经拥有OnImageOpened所需的代码。将它变成一个也可以被DoubleTap调用的方法：
 void OnImageOpened（object sender，RoutedEventArgs e）
 {
 InitializeImage（ ）; 
} 
 
 private void imgZoom_DoubleTap（object sender，GestureEventArgs e）
 {
 InitializeImage（）; 
} 
 
 void InitializeImage（）
 {
 _bitmap =（BitmapImage）TestImage.Source; 
 _scale = 0; 
 CoerceScale（true）; 
 _scale = _coercedScale; 
 
 ResizeImage（true）; 
} 
并将DoubleTap事件添加到您的xaml：

< ViewportControl x：Name =" viewport" DoubleTap = QUOT; imgZoom_DoubleTap"

I am using this code for pinch and zoom and it is working correctly but I have to reset on double tap.

My Xaml Code;

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ViewportControl x:Name="viewport"
ManipulationStarted="OnManipulationStarted" ManipulationDelta="OnManipulationDelta"
ManipulationCompleted="OnManipulationCompleted" ViewportChanged="viewport_ViewportChanged">
<Canvas x:Name="canvas">
<Image x:Name="TestImage" Source="/Assets/test.jpg"
RenderTransformOrigin="0,0" CacheMode="BitmapCache"
ImageOpened="OnImageOpened">
<Image.RenderTransform>
<ScaleTransform x:Name="xform"/>
</Image.RenderTransform>
</Image>
</Canvas>
</ViewportControl>
</Grid>

My variables:

const double MaxScale = 10;

double _scale = 1.0;
double _minScale;
double _coercedScale;
double _originalScale;

Size _viewportSize;
bool _pinching;
Point _screenMidpoint;
Point _relativeMidpoint;

BitmapImage _bitmap;

And my methods ;

void viewport_ViewportChanged(object sender, System.Windows.Controls.Primitives.ViewportChangedEventArgs e)
{
Size newSize = new Size(viewport.Viewport.Width, viewport.Viewport.Height);
if (newSize != _viewportSize)
{
_viewportSize = newSize;
CoerceScale(true);
ResizeImage(false);
}
}

void OnManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
_pinching = false;
_originalScale = _scale;
}

void OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
{
if (e.PinchManipulation != null)
{
e.Handled = true;

if (!_pinching)
{
_pinching = true;
Point center = e.PinchManipulation.Original.Center;
_relativeMidpoint = new Point(center.X / TestImage.ActualWidth, center.Y / TestImage.ActualHeight);

var xform = TestImage.TransformToVisual(viewport);
_screenMidpoint = xform.Transform(center);
}

_scale = _originalScale * e.PinchManipulation.CumulativeScale;

CoerceScale(false);
ResizeImage(false);
}
else if (_pinching)
{
_pinching = false;
_originalScale = _scale = _coercedScale;
}
}

void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs e)
{
_pinching = false;
_scale = _coercedScale;
}

void OnImageOpened(object sender, RoutedEventArgs e)
{
_bitmap = (BitmapImage)TestImage.Source;
_scale = 0;
CoerceScale(true);
_scale = _coercedScale;

ResizeImage(true);
}

void ResizeImage(bool center)
{
if (_coercedScale != 0 && _bitmap != null)
{
double newWidth = canvas.Width = Math.Round(_bitmap.PixelWidth * _coercedScale);
double newHeight = canvas.Height = Math.Round(_bitmap.PixelHeight * _coercedScale);

xform.ScaleX = xform.ScaleY = _coercedScale;

viewport.Bounds = new Rect(0, 0, newWidth, newHeight);

if (center)
{
viewport.SetViewportOrigin(
new Point(
Math.Round((newWidth - viewport.ActualWidth) / 2),
Math.Round((newHeight - viewport.ActualHeight) / 2)
));
}
else
{
Point newImgMid = new Point(newWidth * _relativeMidpoint.X, newHeight * _relativeMidpoint.Y);
Point origin = new Point(newImgMid.X - _screenMidpoint.X, newImgMid.Y - _screenMidpoint.Y);
viewport.SetViewportOrigin(origin);
}
}
}

void CoerceScale(bool recompute)
{
if (recompute && _bitmap != null && viewport != null)
{
double minX = viewport.ActualWidth / _bitmap.PixelWidth;
double minY = viewport.ActualHeight / _bitmap.PixelHeight;

_minScale = Math.Min(minX, minY);
}

_coercedScale = Math.Min(MaxScale, Math.Max(_scale, _minScale));

}

private void imgZoom_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{
//Reset Viewport and Image
}

How can I reset my viewport and image for use them for another?

Thanks.

解决方案

You already have the code you need in OnImageOpened. Make it into a method that can also be called by the DoubleTap:
    void OnImageOpened(object sender, RoutedEventArgs e)
    {
        InitializeImage();
    }

    private void imgZoom_DoubleTap(object sender, GestureEventArgs e)
    {
        InitializeImage();
    }

    void InitializeImage()
    {
        _bitmap = (BitmapImage)TestImage.Source;
        _scale = 0;
        CoerceScale(true);
        _scale = _coercedScale;

        ResizeImage(true);
    }
and add the DoubleTap event to your xaml:
<ViewportControl x:Name="viewport" DoubleTap="imgZoom_DoubleTap"

这篇关于Windows Phone Image Pinch&缩放重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Windows Phone Image Pinch&缩放重置 [英] Windows Phone Image Pinch & Zoom Reset

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

Windows Phone Image Pinch&amp;缩放重置 [英] Windows Phone Image Pinch &amp; Zoom Reset

问题描述

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

Windows Phone Image Pinch&缩放重置 [英] Windows Phone Image Pinch & Zoom Reset

登录关闭