0

現在、写真アプリケーション（windows phone 8.1ランタイム）を開発していますが、写真のズーム中に画像のドラッグ領域を制限しないという問題がありました。

ここに画像の説明を入力

以下はコードです：

<Canvas Name="zoomgrid" Visibility="Collapsed">
    <Image x:Name="zoomimages"
           Stretch="Fill"
           Width="480"
           Height="800"
           ManipulationDelta="img_intro_ManipulationDelta"
           RenderTransformOrigin="0.5,0.5"
           ManipulationMode="All">
        <Image.RenderTransform>
            <CompositeTransform/>
        </Image.RenderTransform>                
    </Image>
</Canvas>

double mincale = 0.5;
double maxscale = 10.0;

private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{           
    Image elemt = sender as Image;
    CompositeTransform transform = elemt.RenderTransform as CompositeTransform;

    transform.ScaleX *= e.Delta.Scale;
    transform.ScaleY *= e.Delta.Scale;

    transform.TranslateX += e.Delta.Translation.X;
    transform.TranslateY += e.Delta.Translation.Y;

    if (transform.ScaleX < mincale) transform.ScaleX = mincale;
    if (transform.ScaleY < mincale) transform.ScaleY = mincale;
    if (transform.ScaleX > maxscale) transform.ScaleX = maxscale;
    if (transform.ScaleY > maxscale) transform.ScaleY = maxscale;

    //To limit the images dragging but did not success.
    double scalewidth = Zoomimages.ActualWidth * ct.ScaleX;
    double scleheight = Zoomimages.ActualHeight * ct.ScaleY;

    double xdiff = Math.Max(0, (scalewidth - this.content.ActualWidth) / 2);
    double ydiff = Math.Max(0, (scleheight - this.content.ActualHeight) / 2);

    if (Math.Abs(ct.TranslateX) > xdiff)
        ct.TranslateX = xdiff * Math.Sign(e.Delta.Translation.X);
    if (Math.Abs(ct.TranslateY) > ydiff)
        ct.TranslateY = ydiff * Math.Sign(e.Delta.Translation.Y);             
}
4

1 に答える 1

0

ヘルパー メソッドを使用して、画像が現在別の要素の境界内にあるかどうかを確認することで、これを達成しました。

あなたの場合、確認したい要素は画像であり、キャンバスの境界内にあることを確認したいと考えています。

private bool IsElementVisible(FrameworkElement element, FrameworkElement container)
    {
        if (!element.IsVisible)
            return false;

        Rect bounds = element.TransformToAncestor(container).TransformBounds(new Rect(0.0, 0.0, element.ActualWidth, element.ActualHeight));
        Rect rect = new Rect(0.0, 0.0, container.ActualWidth, container.ActualHeight);

        if (rect.Left > bounds.Right || rect.Right < bounds.Left || rect.Bottom < bounds.Top || rect.Top > bounds.Bottom)
        {
            return false;
        }

        return true;
    }

私の場合、CompositeTransform の代わりに MatrixTransform を使用しましたが、メソッドは同じである必要があります。

私は通常、「ManipulationStarting」と「ManipulationCompleted」のハンドラーを作成します。

操作開始:

  1. Transform の現在の (操作前の) コピーを格納します。

操作完了:

  1. 画像が範囲外であるかどうかを確認します (私が投稿した方法を使用して)。
  2. 範囲外の場合は、元の Transform に戻します。

これにより、画像がビューの外にドラッグされた場合でも、ユーザーが指を離すとすぐに、画像は最後の適切な場所に戻ります。

このコードを使用した広範なコンテキストに興味がある場合は、このすべての機能をカプセル化する WPF の動作があります。コードはCodeplex にあります。このクラスはあなたにとって興味深いかもしれません。

これが役立つことを願っています:)

于 2014-12-02T12:12:04.110 に答える