WP7 显示二次图像全屏和捏缩放答案

【问题标题】：WP7 Show quadratic image fullscreen and pinch to zoomWP7 显示二次图像全屏和捏缩放
【发布时间】：2011-08-21 02:54:18
【问题描述】：

我有二次图像（大约 2000x2000）。我想在页面上全屏显示它们，并可以使用“捏放大”进行放大。所以初始图像的尺寸为 768 x 768。

<Image Name="displayImage" VerticalAlignment="Center" MinHeight="768" HorizontalAlignment="Center" Source="{Binding Image}" Stretch="UniformToFill" CacheMode="BitmapCache" ImageOpened="OnImageOpened">
   <Image.RenderTransform>
        <CompositeTransform x:Name="transform" ScaleX="1" ScaleY="1" />
    </Image.RenderTransform>
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener PinchDelta="OnPinchDelta" PinchStarted="OnPinchStarted" DragDelta="OnDragDelta" />
    </toolkit:GestureService.GestureListener>
</Image>

private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null) return;

    initialScale = transform.ScaleX;

    Point firstTouch = e.GetPosition(image, 0);
    Point secondTouch = e.GetPosition(image, 1);

    center = new Point(firstTouch.X + (secondTouch.X - firstTouch.X)/2.0,
                       firstTouch.Y + (secondTouch.Y - firstTouch.Y)/2.0);
}

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null) return;

    if (initialScale*e.DistanceRatio > 4 || (initialScale != 1 && e.DistanceRatio == 1) ||
        initialScale*e.DistanceRatio < 1)
        return;

    if (e.DistanceRatio <= 1.08)
    {
        transform.CenterY = 0;
        transform.CenterY = 0;
        transform.TranslateX = 0;
        transform.TranslateY = 0;
    }

    transform.CenterX = center.X;
    transform.CenterY = center.Y;

    transform.ScaleX = (Orientation == PageOrientation.Landscape)
                           ? initialScale*(1 + (e.DistanceRatio - 1)*2)
                           : initialScale*e.DistanceRatio;

    transform.ScaleY = transform.ScaleX;
}

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    var image = sender as Image;

    if (image == null || transform.ScaleX <= 1.1) return;

    double centerX = transform.CenterX;
    double centerY = transform.CenterY;
    double translateX = transform.TranslateX;
    double translateY = transform.TranslateY;
    double scale = transform.ScaleX;
    double width = image.ActualWidth;
    double height = image.ActualHeight;

    if (centerX - scale*centerX + translateX + e.HorizontalChange < 0 &&
        centerX + scale*(width - centerX) + translateX + e.HorizontalChange > width)
    {
        transform.TranslateX += e.HorizontalChange;
    }

    if (centerY - scale*centerY + translateY + e.VerticalChange < 0 &&
        centerY + scale*(height - centerY) + translateY + e.VerticalChange > height)
    {
        transform.TranslateY += e.VerticalChange;
    }

    return;
}

基本上我现在拥有的是一张图片，没有边框（全屏），我可以放大。但问题是，图像是二次方的，所以左右两边都缺少一些东西，我不能“滚动”（或更好地移动图片）向左或向右。仅在放大后才能将图片移动到四周，但我从未看到图像的缺失部分。任何想法如何解决这个问题？

【问题讨论】：

好的，我已经更改了代码，所以我可以移动图像，而无需先放大。但是图像只是在可视屏幕之外裁剪。即使我将图像控件的大小更改为 768 x 768，显示宽度 (428) 之外的所有内容都只是白色。更改拉伸属性不会改变这种行为。

标签： windows-phone-7 fullscreen zooming

【解决方案1】：

我不确定它是否能解决您的问题。但是您的图像是在网格上还是在画布上？当它在网格上时，内容会被剪裁。画布可以更大。

【讨论】：