Windows Phone 8.1 中的签名捕获

Question

我很惊讶在 Windows Phone 8.1 中找不到任何捕获签名的解决方案。到目前为止，我在 Whosebug here... 中只发现了一个，但它抱怨说 WriteableBitmap.DrawLine 方法不可用。

上面的代码link:

using Windows.Foundation;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;

namespace ProofOfConcept.App.Controls
{
    public class SignatureCaptureControl : Canvas
    {
        private WriteableBitmap _writeableBitmap;

        private Point _currentPoint;
        private Point _oldPoint;

        public SignatureCaptureControl()
        {
            _writeableBitmap = new WriteableBitmap(300, 130);
            PointerPressed += SignatureCaptureControl_PointerPressed;
            PointerMoved += SignatureCaptureControl_PointerMoved;
        }

        private void SignatureCaptureControl_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            _currentPoint = e.GetCurrentPoint(this).Position;
            _oldPoint = _currentPoint;
        }

        void SignatureCaptureControl_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            _currentPoint = e.GetCurrentPoint(this).Position;
            _writeableBitmap.DrawLine((int)_currentPoint.X, (int)_currentPoint.Y, (int)_oldPoint.X, (int)_oldPoint.Y, PenColor);
            this.InvalidateArrange();
            _oldPoint = _currentPoint;
        }

        public void ClearSignature()
        {
            _writeableBitmap.Clear();
        }    
    }    
}

Answer 1

此代码示例需要 WriteableBitmapEx 库，DrawLine 方法在该库中定义为扩展方法。

您可以在 NuGet 包管理器中安装此包。

Answer 2

我终于找到了一个示例代码，它完全符合我的要求。它确实让用户可以在 canvas 上涂写他们的签名或其他任何东西，我还没有弄清楚如何保存图像并将其上传到网络服务。我稍后再谈。但这里是创建绘图板的代码。

Link 转到我找到代码的网站。

我把它做成了一个 UserControl。

这是我使用 UserControl 的方式：

<Grid x:Name="inkPanel">
    <Controls:SignatureCaptureControl/>
</Grid>

用户控件Xaml:

<UserControl
    x:Class="MyApp.Controls.SignatureCaptureControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="170"></RowDefinition>
        <RowDefinition Height="60"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Canvas x:Name="inkCanvas" Grid.Row="0">
        <Rectangle x:Name="rect" VerticalAlignment="Top" Height="150" Width="360" Fill="#FFF4F4F5" Stroke="Black" />
    </Canvas>
    <PasswordBox x:Name="txtPin" Grid.Row="1" Width="360" PlaceholderText="Enter Pin">
    </PasswordBox>
    <StackPanel Orientation="Horizontal" Grid.Row="2" Margin="0,10,0,0" HorizontalAlignment="Center">
        <Button Name="btnAccept" Content="Accept" Click="btnAccept_Click"></Button>
        <Button Name="btnClear" Content="Clear" Click="btnClear_Click"></Button>
    </StackPanel>
</Grid>
</UserControl>

隐藏代码：

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Xaml.Navigation;
using Windows.UI;

// The User Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234236

namespace MyApp.Controls
{
    public sealed partial class SignatureCaptureControl : UserControl
    {
        Windows.UI.Xaml.Shapes.Path _Current;

        public SignatureCaptureControl()
        {
            this.InitializeComponent();
            inkCanvas.PointerPressed += inkCanvas_PointerPressed;
            inkCanvas.PointerMoved += inkCanvas_PointerMoved;
            inkCanvas.PointerReleased += inkCanvas_PointerReleased;
            inkCanvas.PointerExited += inkCanvas_PointerReleased;
        }

        void inkCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
        {
            _Current = null;
        }

        void inkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
        {
            var pointer = e.GetCurrentPoint(inkCanvas);
            if (!pointer.Properties.IsLeftButtonPressed || _Current == null)
                return;
            var segments = (_Current.Data as PathGeometry).Figures.First().Segments.First() as PolyLineSegment;
            segments.Points.Add(pointer.Position);
        }

        void inkCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
            var pointer = e.GetCurrentPoint(inkCanvas);
            if (!pointer.Properties.IsLeftButtonPressed)
                return;

            _Current = new Windows.UI.Xaml.Shapes.Path
            {
                Data = new PathGeometry
                {
                    Figures = { new PathFigure { StartPoint = pointer.Position, Segments = { new PolyLineSegment() } } }
                },
                Stroke = new SolidColorBrush(Colors.Black),
                StrokeThickness = 4d,
            };

            inkCanvas.Children.Add(_Current);
        }

        private void btnClear_Click(object sender, RoutedEventArgs e)
        {
            inkCanvas.Children.Clear();
            inkCanvas.Children.Add(rect);
            txtPin.Password = "";
        }

        private void btnAccept_Click(object sender, RoutedEventArgs e)
        {

        }
    }
}

Windows Phone 8.1 中的签名捕获

Signature capture in Windows Phone 8.1

xaml

canvas

writablebitmap

windows-phone-8.1