WP7 全屏显示二次图像并捏合缩放

Question

我有二次图像（大约 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;
}

基本上我现在拥有的是一张图片，没有边框（全屏），我可以放大。但问题是，图像是二次的，所以左边和右边缺少一些东西，我无法“滚动” （或者最好将图片移动）向左或向右。仅当我放大时才可以移动图片，但我从来没有看到图像缺失的部分。有什么想法如何解决这个问题吗？

Answer 1

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