xaml - 如何允许用户在 Windows Phone 8 上移动\调整图片上的图像控件的大小

Question

这是我在使用 Windows 8 手机应用程序时遇到的挑战

流程:用户使用 Windows 8 手机拍照。该逻辑使用 PhotoCamera 类，它适合我的目的。一旦流可用，我会将流传输到结果页面，其中根据流构造 BitmapImage。然后，该位图图像用作 Image 对象的源，该对象在 xaml 文件中定义。这个想法是向用户显示拍摄的照片以进行确认，并且此流程运行良好。这是结果页面的作用。

protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        base.OnNavigatedTo(e);
        MemoryStream stream = (MemoryStream)App.ObjectNavigationData;
        stream.Seek(0, SeekOrigin.Begin);
        var bitmapImage = new BitmapImage(); 
        bitmapImage.SetSource(stream);
        imgCaptureResult.Source = bitmapImage;
        imgCaptureResult.Visibility = System.Windows.Visibility.Visible;
    }

我想要做的是显示一个矩形，用户可以在其中定义裁剪区域，我可以通过在图像对象本身上定义一个矩形对象(或多条线)来实现。只要覆盖对象(裁剪区域)是静态的，这种方法就可以正常工作。请参阅下面的 xaml。 (请注意，这里的 Canvas 是取景器(相机源)，而不是结果页面。在结果页面中，我将使用图像对象而不是 Canvas ，但这个概念是有效的，我可以将线条覆盖在另一个 UI 元素上，只要线条是静态的)

<Canvas x:Name="viewfinderCanvas"
            Grid.Column="0"
            Width="640" 
            Height="480" 
            HorizontalAlignment="Left" >
        <!--Camera viewfinder -->
        <Canvas.Background>
            <VideoBrush x:Name="viewfinderBrush" />
        </Canvas.Background>
        <Line   X1="20" Y1="20"
                X2="100" Y2="20"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="20"
                X2="20" Y2="100"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="540" Y1="20"
                X2="620" Y2="20"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="620" Y1="20"
                X2="620" Y2="100"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="540" Y1="460"
                X2="620" Y2="460"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="620" Y1="460"
                X2="620" Y2="380"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="460"
                X2="100" Y2="460"
                Stroke="Red"
                StrokeThickness="4"/>
        <Line   X1="20" Y1="460"
                X2="20" Y2="380"
                Stroke="Red"
                StrokeThickness="4"/>
    </Canvas>

但我希望用户能够通过手势调整这个矩形的大小，以便他/她可以真正自定义裁剪区域。要么向上\向下移动整个矩形，要么向上\向下移动底边等。换句话说，我需要一个类似于 Paint.Net 中看到的“选择”矩形的控件，以便用户可以选择裁剪区域。我想不出办法做到这一点。我查看了 Phone API 以及 Nokia Imaging SDK，但没有任何启发。任何建议表示赞赏。谢谢

Answer 1

您还可以采用一种方法，用户可以分别选择垂直和水平边界，而不是平移它(如果平移不是直接的并且没有控件可以轻松做到这一点)。让用户使用一些垂直 slider 选择垂直限制，然后以相同的方式让他进行水平选择。然后你可以用适当的颜色在垂直和水平方向上对他选择的区域进行阴影，以显示平移的效果。 仅当您没有实现您想要的目标时才会这样做。