Collecter des entrées manuscrites

Article
10/18/2023

La collecte d’encre numérique fait partie des principales fonctionnalités de la plateforme Windows Presentation Foundation. Cette rubrique décrit les méthodes de collecte d’encre dans WINDOWS Presentation Foundation (WPF).

Prérequis

Pour utiliser les exemples suivants, vous devez d’abord installer Visual Studio et le Kit de développement logiciel (SDK) Windows. Vous devez également comprendre comment écrire des applications pour WPF. Pour plus d’informations sur la prise en main de WPF, consultez Procédure pas à pas : Ma première application de bureau WPF.

Utiliser l’élément InkCanvas

L’élément System.Windows.Controls.InkCanvas offre le moyen le plus simple de collecter des entrées manuscrites dans WPF. Utilisez un InkCanvas élément pour recevoir et afficher l’entrée manuscrite. Généralement, vous entrez de l’encre à l’aide d’un stylet qui interagit avec un digitaliseur pour produire des traits d’encre. En outre, vous pouvez utiliser une souris à la place du stylet. Les traits créés sont représentés en tant qu’objets Stroke et peuvent être manipulés par programmation et par entrée utilisateur. Permet InkCanvas aux utilisateurs de sélectionner, de modifier ou de supprimer un élément existant Stroke.

En utilisant XAML, vous pouvez configurer la collection d’entrées manuscrites aussi facilement que l’ajout d’un élément InkCanvas à votre arborescence. L’exemple suivant ajoute un InkCanvas projet WPF par défaut créé dans Visual Studio :

<Grid>
  <InkCanvas/>
</Grid>

L’élément InkCanvas peut également contenir des éléments enfants, ce qui permet d’ajouter des fonctionnalités d’annotation manuscrite à presque n’importe quel type d’élément XAML. Par exemple, pour ajouter des fonctionnalités d’entrée manuscrite à un élément de texte, il suffit de le rendre enfant d’un InkCanvas:

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

L’ajout de la prise en charge du marquage d’une image avec l’entrée manuscrite est aussi simple :

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

Modes InkCollection

Il InkCanvas prend en charge différents modes d’entrée par le biais de sa EditingMode propriété.

Manipuler l’entrée manuscrite

La InkCanvas prise en charge de nombreuses opérations de modification d’entrée manuscrite est prise en charge. Par exemple, InkCanvas prend en charge l’effacement back-of-pen et aucun code supplémentaire n’est nécessaire pour ajouter la fonctionnalité à l’élément.

Sélection

La définition du mode de sélection est aussi simple que la définition de la InkCanvasEditingMode propriété sur Select.

Le code suivant définit le mode d’édition en fonction de la valeur d’un CheckBox:

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

Utilisez la DrawingAttributes propriété pour modifier l’apparence des traits d’encre. Par exemple, le Color membre de DrawingAttributes définit la couleur du rendu Stroke.

L’exemple suivant modifie la couleur des traits sélectionnés en rouge :

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

DefaultDrawingAttributes

La DefaultDrawingAttributes propriété permet d’accéder aux propriétés telles que la hauteur, la largeur et la couleur des traits à créer dans un InkCanvas. Une fois que vous avez modifié, DefaultDrawingAttributestous les traits futurs entrés dans le InkCanvas fichier sont rendus avec les nouvelles valeurs de propriété.

Outre la modification du DefaultDrawingAttributes fichier code-behind, vous pouvez utiliser la syntaxe XAML pour spécifier des DefaultDrawingAttributes propriétés.

L’exemple suivant montre comment définir la Color propriété. Pour utiliser ce code, créez un projet WPF appelé « HelloInkCanvas » dans Visual Studio. Remplacez le code dans le fichier MainWindow.xaml par le code suivant :

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

Ensuite, ajoutez les gestionnaires d’événements de bouton suivants au fichier code behind, à l’intérieur de la classe MainWindow :

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

Après avoir copié ce code, appuyez sur F5 dans Visual Studio pour exécuter le programme dans le débogueur.

Notez comment les StackPanel boutons sont mis en haut du InkCanvas. Si vous essayez d’encre sur le haut des boutons, les InkCanvas collectes et affichent l’encre derrière les boutons. Cela est dû au fait que les boutons sont des frères et sœurs de l’enfant InkCanvas par opposition aux enfants. De même, les boutons sont plus haut dans l’ordre de plan ; l’encre est donc restituée derrière eux.

Partager via