Almacenar y recuperar datos de trazos de lápiz de Windows Ink
Las aplicaciones de Windows que admiten Windows Ink pueden serializar y deserializar trazos de lápiz en un archivo de formato serializado de entrada de lápiz (ISF). El archivo ISF es una imagen GIF con metadatos adicionales para todos los comportamientos y propiedades de trazo de lápiz. Las aplicaciones que no están habilitadas para la entrada de lápiz pueden ver la imagen GIF estática, incluida la transparencia del fondo del canal alfa.
Nota
El formato ISF es la representación más compacta y persistente de la entrada de lápiz. Puede incrustarse en un formato de documento binario, como un archivo GIF, o colocarse directamente en el Portapapeles.
La especificación de formato serializado de entrada de lápiz (ISF) se puede descargar desde el Centro de descarga de Microsoft.
API importantes: InkCanvas, Windows.UI.Input.Inking
Guardar los trazos de lápiz en un archivo
Aquí se muestra cómo guardar trazos de lápiz dibujados en un control InkCanvas.
Descargue este ejemplo de Guardar y cargar trazos de lápiz desde un archivo de formato serializado de entrada de lápiz (ISF)
En primer lugar, debemos configurar la interfaz de usuario.
La interfaz de usuario incluye los botones "Save", "Load" y "Clear", así como el 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>
A continuación, definimos algunos comportamientos de entrada de lápiz básicos.
El InkPresenter está configurado para interpretar los datos de entrada del lápiz y el mouse como trazos de lápiz (InputDeviceTypes), y se declaran los agentes de escucha para los eventos de clic de los botones.
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;
}
Por último, guardamos la entrada de lápiz en el controlador de eventos de clic del botón Save.
Un FileSavePicker permite al usuario seleccionar el archivo y la ubicación donde deben guardarse los datos de entrada de lápiz.
Una vez que se selecciona un archivo, se abre una secuencia IRandomAccessStream establecida en ReadWrite.
Después, llamamos al método SaveAsync para serializar los trazos de lápiz administrados por el objeto InkStrokeContainer en la secuencia.
// 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.
}
}
}
Nota
El formato GIF es el único formato de archivo admitido para guardar datos de entrada de lápiz. Sin embargo, el método LoadAsync (que se muestra en la sección siguiente) admite otros formatos por motivos de compatibilidad con versiones anteriores.
Cargar trazos de lápiz de un archivo
Aquí se muestra cómo cargar trazos de lápiz de un archivo y representarlos en un control InkCanvas.
Descargue este ejemplo de Guardar y cargar trazos de lápiz desde un archivo de formato serializado de entrada de lápiz (ISF)
En primer lugar, debemos configurar la interfaz de usuario.
La interfaz de usuario incluye los botones "Save", "Load" y "Clear", así como el 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>
A continuación, definimos algunos comportamientos de entrada de lápiz básicos.
El InkPresenter está configurado para interpretar los datos de entrada del lápiz y el mouse como trazos de lápiz (InputDeviceTypes), y se declaran los agentes de escucha para los eventos de clic de los botones.
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;
}
Por último, cargamos la entrada de lápiz en el controlador de eventos de clic del botón Load.
Un FileOpenPicker permite al usuario seleccionar el archivo y la ubicación de donde deben recuperarse los datos de entrada de lápiz guardados.
Una vez que se selecciona un archivo, se abre una secuencia IRandomAccessStream establecida en Read.
A continuación, llamamos a LoadAsync para leer, deserializar y cargar los trazos de lápiz guardados en el InkStrokeContainer. Cuando los trazos se cargan en el InkStrokeContainer, el InkPresenter los representa inmediatamente en el InkCanvas.
Nota
Se borran todos los trazos existentes en el objeto InkStrokeContainer antes de cargarse los trazos nuevos.
// 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.
}
}
Nota
El formato GIF es el único formato de archivo admitido para guardar datos de entrada de lápiz. Sin embargo, el método LoadAsync es compatible con los siguientes formatos por motivos de compatibilidad con versiones anteriores.
| Formato | Descripción |
|---|---|
| InkSerializedFormat | Especifica la entrada de lápiz que se vuelve permanente usando ISF. Este formato es la representación más compacta y persistente de la entrada de lápiz. Puede incrustarse en un formato de documento binario o colocarse directamente en el Portapapeles. |
| Base64InkSerializedFormat | Especifica la entrada de lápiz que se vuelve permanente codificando el ISF como una secuencia en base64. Este formato se ofrece para que la entrada de lápiz pueda codificarse directamente en un archivo XML o HTML. |
| Gif | Especifica la entrada de lápiz que se vuelve permanente usando un archivo GIF que contiene el ISF como metadatos incrustados en el archivo. Esto permite ver la entrada de lápiz en aplicaciones que no están habilitadas para entrada de lápiz y mantener la fidelidad total de la entrada de lápiz al volver a una aplicación habilitada para esa entrada. Este formato es ideal cuando se transporta contenido de entrada de lápiz en un archivo HTML y para facilitar su uso por parte de aplicaciones que estén o no habilitadas para entrada de lápiz. |
| Base64Gif | Especifica la entrada de lápiz que se vuelve permanente usando un GIF fortificado codificado en base64. Este formato se proporciona cuando se debe codificar la entrada de lápiz directamente en un archivo XML o HTML para la conversión posterior en imagen. Un uso posible es en un formato XML generado para contener toda la información de entrada de lápiz que se use como una manera de generar HTML mediante el Lenguaje de transformación basado en hojas de estilo (XSLT). |
Copiar y pegar trazos de lápiz con el Portapapeles
Aquí se muestra cómo usar el Portapapeles para transferir los trazos de lápiz entre aplicaciones.
Para admitir la funcionalidad de Portapapeles, los comandos Cortar y Copiar integrados del InkStrokeContainer requieren la selección de uno o más trazos de lápiz.
Para este ejemplo, habilitamos la selección de trazo cuando se modifica la entrada con el botón de menú contextual del lápiz (o el botón secundario del mouse). Para obtener un ejemplo completo de cómo implementar la selección de trazo, consulta Entrada de paso a través para el procesamiento avanzado en Interacciones de pluma y lápiz.
Descargue este ejemplo de Guardar y cargar trazos de lápiz desde el Portapapeles.
En primer lugar, debemos configurar la interfaz de usuario.
La interfaz de usuario incluye los botones "Cut", "Copy", "Paste" y "Clear", junto con el InkCanvas y un lienzo de selección.
<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>
A continuación, definimos algunos comportamientos de entrada de lápiz básicos.
El InkPresenter está configurado para interpretar los datos de entrada de lápiz y mouse como trazos de lápiz (InputDeviceTypes). Aquí también se declaran los agentes de escucha para los eventos de clic de los botones, y los eventos de puntero y trazo para la funcionalidad de selección.
Para obtener un ejemplo completo de cómo implementar la selección de trazo, consulta Entrada de paso a través para el procesamiento avanzado en Interacciones de pluma y lápiz.
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;
}
Por último, después de agregar compatibilidad de selección de trazo, implementamos la funcionalidad del Portapapeles en los controladores de eventos de clic de los botones Cut, Copy y Paste.
Para cortar, primero llamamos a CopySelectedToClipboard en el InkStrokeContainer del InkPresenter.
A continuación, llamamos a DeleteSelected para quitar los trazos del lienzo de entrada de lápiz.
Por último, eliminamos todos los trazos de selección del lienzo de selección.
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;
}
}
Para copiar, simplemente llamamos a CopySelectedToClipboard en inkStrokeContainer de InkPresenter.
private void btnCopy_Click(object sender, RoutedEventArgs e)
{
inkCanvas.InkPresenter.StrokeContainer.CopySelectedToClipboard();
}
Para pegar, llamamos a CanPasteFromClipboard para asegurarnos de que el contenido del Portapapeles se puede pegar en el lienzo de lápiz.
Si es así, llamamos a PasteFromClipboard para insertar los trazos de lápiz del Portapapeles en el inkStrokeContainer de InkPresenter, que luego representa los trazos en el lienzo de lápiz.
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.
}
}
Artículos relacionados
Ejemplos del tema
- Guardar y cargar trazos de lápiz desde un archivo de formato serializado de entrada de lápiz (ISF)
- Guardar y cargar trazos de lápiz desde el Portapapeles
Otros ejemplos