2

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

我已经实现了一个可拖动和可缩放的图像，但我可以将它拖出屏幕，所以我的图像丢失了视图。

我应该将图像放在哪里以将其保存在盒子中（并且可能具有不错的弹跳效果）？

编辑：

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

一点代码：

    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 条件意味着：如果我放大 -> 没问题，因为 e.DistanceRatio >1。如果我缩小，我会停下来，直到 initialScale 相同！

现在我仍然需要关于如何避免外部阻力的帮助。

4

3 回答 3

1

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

这是“阻止拖动”的代码：

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.. 更加“流畅”和愉快！

于 2012-05-17T11:49:34.897 回答
1

我的解决方案：

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;

    }

认为它应该帮助别人

于 2012-10-26T13:07:00.917 回答
0

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

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));
}
于 2012-05-16T19:27:51.163 回答