Question

我有二次图像（arround 2000x2000）。我想在页面上显示全屏，可以放大“pintch to zoom”。因此，初始图像的样本为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;
}

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

Answer 1

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

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

1 个答案: