WP7 Показать квадратичное изображение во весь экран и ущипнуть, чтобы увеличить - PullRequest
Новая
       8

WP7 Показать квадратичное изображение во весь экран и ущипнуть, чтобы увеличить

2 голосов
/ 12 августа 2011

У меня есть квадратичные изображения (около 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;
}

По сути, сейчас у меня есть изображение без границ (полноэкранное), и я могуувеличить. Но проблема в том, что изображения квадратичные, поэтому слева и справа чего-то не хватает, и я не могу «прокрутить» (или лучше переместить картинку) влево или вправо.Перемещение изображения по окружности работает только тогда, когда я увеличил масштаб, но я никогда не вижу недостающие части изображения.Есть идеи как это решить?

1 Ответ

2 голосов
/ 20 августа 2011

Я не уверен, решит ли это вашу проблему. Но ваше изображение на сетке или на холсте? Когда оно находится на сетке, контент обрезается. Холст может быть намного больше.

...