Question

我找不到我需要的属性或对象..

我已经实现了可拖动和可缩放的图像，但我可以将其拖出屏幕，因此我将图像从视图中丢失。

我应该把我的图像放在一个盒子里面（并且可能有很好的弹跳效果）？

修改

实际上我的图像必须保留在堆叠面板中，只有放大的可能性。（最大缩小为第一次渲染）。

一些代码：

    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    {
        initialAngle = compositeTransform.Rotation;
        initialScale = compositeTransform.ScaleX;
    }

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        compositeTransform.ScaleX = initialScale * e.DistanceRatio;
        compositeTransform.ScaleY = initialScale * e.DistanceRatio;
    }

    private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
    {
        compositeTransform.TranslateX += e.HorizontalChange;
        compositeTransform.TranslateY += e.VerticalChange;
    }

    <StackPanel x:Name="container">
        <Image x:Name="image_chart">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="scale" />
                    <TranslateTransform x:Name="transform" />
                    <CompositeTransform x:Name="compositeTransform"/>
                </TransformGroup>
            </Image.RenderTransform>
            <toolkit:GestureService.GestureListener>
                <toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta"
                                         DragDelta="OnDragDelta"/>
            </toolkit:GestureService.GestureListener>
        </Image>
    </StackPanel>

编辑2 - 半答案

我终于找到了如何以原始尺寸停止缩小！

private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        if (1.0 <= (initialScale * e.DistanceRatio))
        {
            compositeTransform.ScaleX = initialScale * e.DistanceRatio;
            compositeTransform.ScaleY = initialScale * e.DistanceRatio;
        }
    }

If条件意味着：如果我放大 - ＆gt;没问题，因为e.DistanceRatio> 1。如果我缩小，我将停止，直到initialScale将是相同的！

现在我仍然需要帮助避免外面的拖拽。

Answer 1

好的，我找到了解决方案，但我需要一些改进。缩放工作，但当图像在右侧时，它全部在左侧（因为它从top_left角开始缩放..

以下是“阻止拖动”的代码：

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
    {

        double realWidth = image_chart.ActualWidth*compositeTransform.ScaleX;
        double realHeight = image_chart.ActualHeight * compositeTransform.ScaleY;

        if(compositeTransform.TranslateX>=0)
           compositeTransform.TranslateX = Math.Max(container.ActualWidth - realWidth,
                                                 Math.Min(0, compositeTransform.TranslateX + e.HorizontalChange));
        else
            compositeTransform.TranslateX = Math.Max(container.ActualWidth - realWidth,
                                                     Math.Min(0, compositeTransform.TranslateX + e.HorizontalChange));
        if(compositeTransform.TranslateY>=0)
           compositeTransform.TranslateY = Math.Max(container.ActualHeight - realHeight,
                                                 Math.Min(0, compositeTransform.TranslateY + e.VerticalChange));
        else
            compositeTransform.TranslateY = Math.Max(container.ActualHeight - realHeight,
                                                     Math.Min(0, compositeTransform.TranslateY + e.VerticalChange));

修改

最后我决定使用WebBrowser ..更“流畅”和愉快！

Answer 2

我的解决方案：

XAML代码

<StackPanel  x:Name="Scroll" Margin="0">
                    <Image  CacheMode="BitmapCache" Name="FrontCover"   Source="{Binding FullCover}"  >
                        <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>
            </StackPanel>

 double initialScale;

    private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e)
    {
        initialScale = transform.ScaleX;
    }

    private void OnPinchDelta(object sender, PinchGestureEventArgs e)
    {
        var curZoom = initialScale * e.DistanceRatio;
        if (curZoom >= 1 && curZoom <= 3)
        {
            transform.ScaleX = curZoom;
            transform.ScaleY = curZoom;

        }
    }

    private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
    {
        transform.CenterX = (transform.CenterX - e.HorizontalChange);
        transform.CenterY = (transform.CenterY - e.VerticalChange);

        if (transform.CenterX < 0)
            transform.CenterX = 0;
        else if ( transform.CenterX > Scroll.ActualWidth)
            transform.CenterX = Scroll.ActualWidth;
        else if (transform.CenterX > (FrontCover.Height * transform.ScaleX))
            transform.CenterX = FrontCover.Height * transform.ScaleX;

        if (transform.CenterY < 0)
            transform.CenterY = 0;
        else if (transform.CenterY > Scroll.ActualHeight)
            transform.CenterY = Scroll.ActualHeight;
        else if (transform.CenterY > (FrontCover.Height * transform.ScaleY))
            transform.CenterY = FrontCover.Height * transform.ScaleY;

    }

认为它应该帮助别人

Answer 3

假设在开始时图像位于左上角（请检查缩放后是否仍然有效）：

private void OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    compositeTransform.TranslateX = Math.Min(container.ActualWidth - image_chart.ActualWidth,
        Math.Max(0,
            compositeTransform.TranslateX + e.HorizontalChange));
    compositeTransform.TranslateY = Math.Min(container.ActualHeight - image_chart.ActualHeight,
        Math.Max(0,
            compositeTransform.TranslateY + e.VerticalChange));
}

如何不将图像拖出框架？

3 个答案: