通用 Windows 8.1 应用程序中的用户签名 [英] User signature in universal windows 8.1 app

问题描述

是否可以在 Windows 8.1 移动设备上签署文档?类似于画布，用户可以在其中用手或手写笔绘制您的签名.是否有针对此任务或其他内容的 XAML 控件?

Is there any ability to sign the document on windows 8.1 mobile device? Something like a canvas where user will be able to draw your signature by hand or stylus. Is there any XAML control for this task or something else ?

推荐答案

我为此苦苦挣扎了一天.似乎在 Windows Phone 7 和 8.0 中可用的内置墨迹控制在 8.1 中被拉掉了

I struggled with this for the best part of a day. It seems that the built-in inking control that used to be available in Windows Phone 7 and 8.0 was pulled out for 8.1

我使用 Chris W 在文章中指出的技术制作了一个控件，该控件可以添加到页面的 XAML 中并处理其他所有内容.

I used the techniques in the article pointed out by Chris W to make a control that can be added to the page's XAML and handle everything else.

神奇之处在于 WritableBitmap 以及 PointerPressed 和 PointerMoved 方法.

The magic is in the WritableBitmap and the PointerPressed and PointerMoved methods.

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

    }

}

使用以下内容 该控件将显示一个 300x130 的白色框，当手指或触控笔拖过它时，该框将绘制线条.

Using the following The control will display a 300x130 white box that will draw lines as the finger or stylus is dragged over it.

<Border Background="White">
    <controls:SignatureCaptureControl Height="130" Width="300"/>
</Border>

为了得到图像，我们必须从 WritableBitmap 中提取像素数据，然后将其编码为 Bitmap/Gif/Jpeg/Png/等.

To get an image out we have to extract the pixel data from the WritableBitmap and then encode it as a Bitmap/Gif/Jpeg/Png/etc.

public Task<byte[]> ReadAsPngImageAsync()
{
    return ReadImageFromWritableBitmapAsync(_writeableBitmap, Windows.Graphics.Imaging.BitmapEncoder.PngEncoderId);
}


internal static async Task<byte[]> ReadImageFromWritableBitmapAsync(Windows.UI.Xaml.Media.Imaging.WriteableBitmap writeableBitmap, Guid encoderId)
{
    var rawPixels = await ConvertBitmapToByteArrayAsync(writeableBitmap);
    var encodedPixels = await EncodePixels(rawPixels, encoderId, (uint)writeableBitmap.PixelWidth, (uint)writeableBitmap.PixelHeight);
    return encodedPixels;
}

private static async Task<byte[]> ConvertBitmapToByteArrayAsync(Windows.UI.Xaml.Media.Imaging.WriteableBitmap bitmap)
{
    using (var stream = bitmap.PixelBuffer.AsStream())
    {
        var pixels = new byte[(uint)stream.Length];
        await stream.ReadAsync(pixels, 0, pixels.Length);
        return pixels;
    }
}

private static async Task<byte[]> EncodePixels(byte[] signaturePixels, Guid encoderId, uint pixelWidth, uint pixelHeight)
{
    using (var randomAccessStream = new Windows.Storage.Streams.InMemoryRandomAccessStream())
    {
        var encoder = await Windows.Graphics.Imaging.BitmapEncoder.CreateAsync(encoderId, randomAccessStream);
        encoder.SetPixelData(Windows.Graphics.Imaging.BitmapPixelFormat.Bgra8, Windows.Graphics.Imaging.BitmapAlphaMode.Premultiplied,
            pixelWidth, pixelHeight,
            96, 96, signaturePixels);
        await encoder.FlushAsync();

        using (var stream = randomAccessStream.GetInputStreamAt(0))
        {
            var pixels = new byte[(uint)randomAccessStream.Size];
            stream.AsStreamForRead().Read(pixels, 0, pixels.Length);
            return pixels;
        }
    }
}

现在我们有一个以标准形式表示图像的字节数组，我们可以简单地将数据保存到本地存储或提交给服务.

Now we have a byte array representing the image in a standard form we can simply save the data to local storage or submit it to a service.

这篇关于通用 Windows 8.1 应用程序中的用户签名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！