Windows Ink ストロークデータの保存と取得

[アーティクル]
04/06/2023

Windows Ink をサポートしている Windows アプリでは、インクストロークを Ink Serialized Format (ISF) ファイルにシリアル化および逆シリアル化することができます。 ISF ファイルは、すべてのインクストロークのプロパティと動作に関する追加のメタデータを含む GIF 画像です。インク対応ではないアプリでは、アルファチャンネルの背景色の透明度を含めて、静的な GIF 画像を表示できます。

注意

ISF は、最もコンパクトなインクの永続表現です。バイナリドキュメント形式 (GIF ファイルなど) に埋め込むことも、クリップボードに直接配置することもできます。

Ink Serialized Format (ISF) 仕様は、Microsoft ダウンロードセンターからダウンロードできます。

重要な API: InkCanvas、Windows.UI.Input.Inking

インクストロークをファイルに保存する

ここでは、InkCanvas コントロールに描画されたインクストロークの保存方法を説明します。

このサンプルは、インクストロークを Ink Serialized Format (ISF) ファイルに保存し、読み込むサンプルとしてダウンロードしてください

まず、UI を設定します。

UI には [Save]、[Load]、[Clear] の各ボタンと、InkCanvas が含まれています。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="Header" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnSave" 
                    Content="Save" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnLoad" 
                    Content="Load" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="50,0,10,0"/>
        </StackPanel>
        <Grid Grid.Row="1">
            <InkCanvas x:Name="inkCanvas" />
        </Grid>
    </Grid>

次に、基本的なインク入力の動作をいくつか設定します。

InkPresenter は、ペンとマウスのいずれからの入力データもインクストローク (InputDeviceTypes) として解釈するように構成します。各ボタンのイベントに対するリスナーも宣言します。

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to initiate save.
        btnSave.Click += btnSave_Click;
        // Listen for button click to initiate load.
        btnLoad.Click += btnLoad_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;
    }

最後に、[Save] ボタンのクリックイベントハンドラーで、インクを保存します。

FileSavePicker を使用すると、インクデータの保存先としてファイルと場所の両方をユーザーが選択できます。

ファイルが選択されたら、ReadWrite に設定された IRandomAccessStream ストリームを開きます。

次に SaveAsync を呼び出して、InkStrokeContainer によって管理されているインクストロークをストリームにシリアル化します。

// Save ink data to a file.
    private async void btnSave_Click(object sender, RoutedEventArgs e)
    {
        // Get all strokes on the InkCanvas.
        IReadOnlyList<InkStroke> currentStrokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();

        // Strokes present on ink canvas.
        if (currentStrokes.Count > 0)
        {
            // Let users choose their ink file using a file picker.
            // Initialize the picker.
            Windows.Storage.Pickers.FileSavePicker savePicker = 
                new Windows.Storage.Pickers.FileSavePicker();
            savePicker.SuggestedStartLocation = 
                Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
            savePicker.FileTypeChoices.Add(
                "GIF with embedded ISF", 
                new List<string>() { ".gif" });
            savePicker.DefaultFileExtension = ".gif";
            savePicker.SuggestedFileName = "InkSample";

            // Show the file picker.
            Windows.Storage.StorageFile file = 
                await savePicker.PickSaveFileAsync();
            // When chosen, picker returns a reference to the selected file.
            if (file != null)
            {
                // Prevent updates to the file until updates are 
                // finalized with call to CompleteUpdatesAsync.
                Windows.Storage.CachedFileManager.DeferUpdates(file);
                // Open a file stream for writing.
                IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.ReadWrite);
                // Write the ink strokes to the output stream.
                using (IOutputStream outputStream = stream.GetOutputStreamAt(0))
                {
                    await inkCanvas.InkPresenter.StrokeContainer.SaveAsync(outputStream);
                    await outputStream.FlushAsync();
                }
                stream.Dispose();

                // Finalize write so other apps can update file.
                Windows.Storage.Provider.FileUpdateStatus status =
                    await Windows.Storage.CachedFileManager.CompleteUpdatesAsync(file);

                if (status == Windows.Storage.Provider.FileUpdateStatus.Complete)
                {
                    // File saved.
                }
                else
                {
                    // File couldn't be saved.
                }
            }
            // User selects Cancel and picker returns null.
            else
            {
                // Operation cancelled.
            }
        }
    }

注意

インクデータの保存用にサポートされるファイル形式は GIF のみです。ただし、LoadAsync メソッド (次のセクションで説明します) では、下位互換性のためにその他の形式もサポートされています。

インクストロークをファイルから読み込む

ここでは、ファイルからインクストロークを読み込んで InkCanvas コントロールにレンダリングする方法を示します。

このサンプルは、インクストロークを Ink Serialized Format (ISF) ファイルに保存し、読み込むサンプルとしてダウンロードしてください

まず、UI を設定します。

UI には [Save]、[Load]、[Clear] の各ボタンと、InkCanvas が含まれています。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="Header" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnSave" 
                    Content="Save" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnLoad" 
                    Content="Load" 
                    Margin="50,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="50,0,10,0"/>
        </StackPanel>
        <Grid Grid.Row="1">
            <InkCanvas x:Name="inkCanvas" />
        </Grid>
    </Grid>

次に、基本的なインク入力の動作をいくつか設定します。

InkPresenter は、ペンとマウスのいずれからの入力データもインクストローク (InputDeviceTypes) として解釈するように構成します。各ボタンのイベントに対するリスナーも宣言します。

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to initiate save.
        btnSave.Click += btnSave_Click;
        // Listen for button click to initiate load.
        btnLoad.Click += btnLoad_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;
    }

最後に、[Load] ボタンのクリックイベントハンドラーで、インクを読み込みます。

FileOpenPicker を使用すると、保存済みインクデータを取得するためのファイルと場所の両方をユーザーが選択できます。

ファイルが選択されたら、Read に設定された IRandomAccessStream ストリームを開きます。

次に LoadAsync を呼び出して、保存済みのインクストロークの読み取りと逆シリアル化を行い、InkStrokeContainer に読み込みます。ストロークを InkStrokeContainer に読み込むと、InkPresenter は直ちにストロークを InkCanvas にレンダリングします。

注意

新しいストロークが読み込まれる前には、InkStrokeContainer 内の既存のストロークがすべて消去されます。

// Load ink data from a file.
private async void btnLoad_Click(object sender, RoutedEventArgs e)
{
    // Let users choose their ink file using a file picker.
    // Initialize the picker.
    Windows.Storage.Pickers.FileOpenPicker openPicker =
        new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
    openPicker.FileTypeFilter.Add(".gif");
    // Show the file picker.
    Windows.Storage.StorageFile file = await openPicker.PickSingleFileAsync();
    // User selects a file and picker returns a reference to the selected file.
    if (file != null)
    {
        // Open a file stream for reading.
        IRandomAccessStream stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        // Read from file.
        using (var inputStream = stream.GetInputStreamAt(0))
        {
            await inkCanvas.InkPresenter.StrokeContainer.LoadAsync(inputStream);
        }
        stream.Dispose();
    }
    // User selects Cancel and picker returns null.
    else
    {
        // Operation cancelled.
    }
}

注意

インクデータの保存用にサポートされるファイル形式は GIF のみです。ただし、LoadAsync メソッドでは、下位互換性のために次の形式もサポートされています。

形式	説明
InkSerializedFormat	ISF で永続化されたインクを指定します。これは最もコンパクトなインクの永続表現です。バイナリドキュメント形式への埋め込みまたはクリップボードへの直接配置を実行できます。
Base64InkSerializedFormat	base64 ストリームとして ISF をエンコードすることで永続化されたインクを指定します。この形式を指定すると、インクを XML ファイルや HTML ファイルで直接エンコードできます。
Gif	ファイル内に ISF がメタデータとして埋め込まれた GIF ファイルで永続化されたインクを指定します。この形式では、インクに対応していないアプリケーションでインクを表示でき、インク対応のアプリケーションに返されたときもまったく同じように再現できます。この形式は、HTML ファイル内のインクのコンテンツを転送して、インクアプリとインク対応でないアプリで使えるようにする場合に適しています。
Base64Gif	base64 エンコードの拡張 GIF で永続化されたインクを指定します。この形式は、後で画像に変換するために、インクを XML ファイルや HTML ファイルで直接エンコードする場合に指定します。すべてのインク情報を格納するために生成された XML 形式で、Extensible Stylesheet Language Transformations (XSLT) を介して HTML を生成するために使うことができます。

クリップボードを使ってインクストロークのコピーと貼り付けを行う

ここでは、クリップボードを使って、アプリ間でインクストロークを転送する方法について説明します。

クリップボード機能をサポートするために、組み込みの InkStrokeContainer の切り取り/コピーコマンドでは、1 つまたは複数のインクストロークの選択が求められます。

次の例では、ペンバレルボタン (またはマウスの右ボタン) で入力が変更された場合にストロークを選べるようにする手順を示しています。ストローク選択の実装方法を示す詳しい例については、「ペン操作とスタイラス操作」の「高度な処理のための入力のパススルー」をご覧ください。

このサンプルは、インクストロークをクリップボードに保存し、読み込むサンプルとしてダウンロードしてください

まず、UI を設定します。

UI には、[Cut]、[Copy]、[Paste]、[Clear] の各ボタン、InkCanvas、選択キャンバスが含まれています。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
            <TextBlock x:Name="tbHeader" 
                       Text="Basic ink store sample" 
                       Style="{ThemeResource HeaderTextBlockStyle}" 
                       Margin="10,0,0,0" />
            <Button x:Name="btnCut" 
                    Content="Cut" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnCopy" 
                    Content="Copy" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnPaste" 
                    Content="Paste" 
                    Margin="20,0,10,0"/>
            <Button x:Name="btnClear" 
                    Content="Clear" 
                    Margin="20,0,10,0"/>
        </StackPanel>
        <Grid x:Name="gridCanvas" Grid.Row="1">
            <!-- Canvas for displaying selection UI. -->
            <Canvas x:Name="selectionCanvas"/>
            <!-- Inking area -->
            <InkCanvas x:Name="inkCanvas"/>
        </Grid>
    </Grid>

次に、基本的なインク入力の動作をいくつか設定します。

InkPresenter は、ペンとマウスのいずれからの入力データもインクストローク (InputDeviceTypes) として解釈するように構成します。ここでは、ボタンのクリックイベント、選択機能のポインターイベントおよびストロークイベントに対するリスナーも宣言されています。

ストローク選択の実装方法を示す詳しい例については、「ペン操作とスタイラス操作」の「高度な処理のための入力のパススルー」をご覧ください。

public MainPage()
    {
        this.InitializeComponent();

        // Set supported inking device types.
        inkCanvas.InkPresenter.InputDeviceTypes =
            Windows.UI.Core.CoreInputDeviceTypes.Mouse |
            Windows.UI.Core.CoreInputDeviceTypes.Pen;

        // Listen for button click to cut ink strokes.
        btnCut.Click += btnCut_Click;
        // Listen for button click to copy ink strokes.
        btnCopy.Click += btnCopy_Click;
        // Listen for button click to paste ink strokes.
        btnPaste.Click += btnPaste_Click;
        // Listen for button click to clear ink canvas.
        btnClear.Click += btnClear_Click;

        // By default, the InkPresenter processes input modified by 
        // a secondary affordance (pen barrel button, right mouse 
        // button, or similar) as ink.
        // To pass through modified input to the app for custom processing 
        // on the app UI thread instead of the background ink thread, set 
        // InputProcessingConfiguration.RightDragAction to LeaveUnprocessed.
        inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
            InkInputRightDragAction.LeaveUnprocessed;

        // Listen for unprocessed pointer events from modified input.
        // The input is used to provide selection functionality.
        inkCanvas.InkPresenter.UnprocessedInput.PointerPressed +=
            UnprocessedInput_PointerPressed;
        inkCanvas.InkPresenter.UnprocessedInput.PointerMoved +=
            UnprocessedInput_PointerMoved;
        inkCanvas.InkPresenter.UnprocessedInput.PointerReleased +=
            UnprocessedInput_PointerReleased;

        // Listen for new ink or erase strokes to clean up selection UI.
        inkCanvas.InkPresenter.StrokeInput.StrokeStarted +=
            StrokeInput_StrokeStarted;
        inkCanvas.InkPresenter.StrokesErased +=
            InkPresenter_StrokesErased;
    }

最後に、ストローク選択サポートを追加した後で、[Cut] ボタン、[Copy] ボタン、[Paste] ボタンのクリックイベントハンドラーにクリップボード機能を実装します。

切り取りの場合は、まず InkPresenter の InkStrokeContainer で CopySelectedToClipboard を呼び出します。

次に DeleteSelected を呼び出して、インクキャンバスからストロークを削除します。

最後に、選択キャンバスからすべてのストローク選択を削除します。

private void btnCut_Click(object sender, RoutedEventArgs e)
    {
        inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();
        inkCanvas.InkPresenter.StrokeContainer.DeleteSelected();
        ClearSelection();
    }

// Clean up selection UI.
    private void ClearSelection()
    {
        var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        foreach (var stroke in strokes)
        {
            stroke.Selected = false;
        }
        ClearDrawnBoundingRect();
    }

    private void ClearDrawnBoundingRect()
    {
        if (selectionCanvas.Children.Any())
        {
            selectionCanvas.Children.Clear();
            boundingRect = Rect.Empty;
        }
    }

コピーの場合は、InkPresenter の InkStrokeContainer で CopySelectedToClipboard を呼び出すだけです。

private void btnCopy_Click(object sender, RoutedEventArgs e)
    {
        inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();
    }

貼り付けの場合は、クリップボードのコンテンツをインクキャンバスに貼り付けることができるように、CanPasteFromClipboard を呼び出します。

その場合は、PasteFromClipboard を呼び出して、クリップボード内のインクストロークを InkPresenter の InkStrokeContainer に挿入します。これにより、ストロークがインクキャンバスにレンダリングされます。

private void btnPaste_Click(object sender, RoutedEventArgs e)
    {
        if (inkCanvas.InkPresenter.StrokeContainer.CanPasteFromClipboard())
        {
            inkCanvas.InkPresenter.StrokeContainer.PasteFromClipboard(
                new Point(0, 0));
        }
        else
        {
            // Cannot paste from clipboard.
        }
    }

ペン操作とスタイラス操作

トピックのサンプル

その他のサンプル

次の方法で共有

Windows Ink ストロークデータの保存と取得

インクストロークをファイルに保存する

インクストロークをファイルから読み込む

クリップボードを使ってインクストロークのコピーと貼り付けを行う

その他のリソース

次の方法で共有

Windows Ink ストローク データの保存と取得

インク ストロークをファイルに保存する

インク ストロークをファイルから読み込む

クリップボードを使ってインク ストロークのコピーと貼り付けを行う

関連記事

その他のリソース

Windows Ink ストロークデータの保存と取得

インクストロークをファイルに保存する

インクストロークをファイルから読み込む

クリップボードを使ってインクストロークのコピーと貼り付けを行う