Question

现在，我正在开发照片应用程序（Windows Phone 8.1运行时）但我遇到的问题是在照片缩放时没有限制图像拖动区域。

enter image description here

以下是代码：

<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);             
}

Answer 1

我通过使用辅助方法来检查图像当前是否在另一个元素的边界内，从而实现了这一目标。

在您的情况下，您要检查的元素是图像，并且您想要在画布的范围内检查它。

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;
    }

就我而言，我使用的是MatrixTransform而不是CompositeTransform，但方法应该是相同的。

我经常为“操纵开始”创建处理程序。和＆＃39; ManipulationCompleted＆＃39;，其中：

<强> ManipulationStarting：

存储Transform的当前（预操作）副本。

ManipulationCompleted：

检查图像是否超出界限（使用我发布的方法）。
如果超出范围，则恢复原始的转换。

这样，即使您的图像被拖出视野 - 只要用户抬起手指，图像就会弹回到最后一个好位置。

如果您对我使用此代码的更广泛的上下文感兴趣，我有一个封装所有这些功能的WPF行为。 code位于Codeplex上。您可能会对此class感兴趣。

我希望这会有所帮助：）

如何限制app中的图像拖动区域？

1 个答案: