【问题标题】:how to allow user to move\resize an image control on a picture on Windows Phone 8如何允许用户在 Windows Phone 8 上的图片上移动\调整图像控件的大小
【发布时间】:2014-12-19 16:19:18
【问题描述】:

这是我在使用 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。 (请注意,这里的画布是取景器(相机源),而不是结果页面。在结果页面中,我将使用图像对象而不是画布,但这个概念有效,我可以将线条覆盖在另一个 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,但没有任何东西在我脑海中点亮。任何建议表示赞赏。谢谢

【问题讨论】:

  • 不确定是否要移动 UI 元素,但为什么不保持 UI 元素静态并转换图像以达到相同的效果。因此,无需移动 UI 裁剪区域,只需重新调整图像(调整大小、移动、旋转)。
  • 感谢您的回复。你是对的,我的最终目标是裁剪图像,但我需要用户可选择的裁剪区域。你能想到什么对我有帮助吗?我需要类似“选择图像”控件的东西,您可以在 Paint.Net 中找到它。我会澄清我的问题。再次感谢您的回复
  • 那么它也可以选择。当您检测到用户的手势时,您可以应用重构过滤器,以便用户修改矩形内可见的内容。 (您可以看看诺基亚创意工作室是如何做到的。)
  • 谢谢。在您的建议之后,我取得了很大的进步,我快到了。我处理了 ManipulationStarted 事件和 ManipulationDelta,检索了所选矩形的坐标,并在重构过滤器中使用。需要进一步打磨,但核心已经完成。再次感谢!

标签: xaml windows-phone-8 nokia-imaging-sdk lumia-imaging-sdk


【解决方案1】:

您还可以采用一种方法,用户可以分别选择垂直和水平边界,而不是平移它(如果平移不是直接的,并且没有控件可以轻松做到这一点)。让用户用一些垂直滑块选择垂直限制,然后以同样的方式让他进行水平选择。然后你可以用适当的颜色垂直和水平地对他选择的区域进行着色,以显示一种平移的效果。 这只有在你没有达到你想要达到的目标的情况下。

【讨论】:

  • 谢谢。我同意在触摸屏上平移并不容易,我将尝试在两个边界上实施您的建议。感谢帮助
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-01-03
  • 2011-07-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多