Inkt verzamelen

Artikel
12/18/2024

Het Windows Presentation Foundation-platform verzamelt digitale inkt als een kernonderdeel van de functionaliteit. In dit onderwerp worden methoden besproken voor het verzamelen van inkt in Windows Presentation Foundation (WPF).

Voorwaarden

Als u de volgende voorbeelden wilt gebruiken, moet u eerst Visual Studio en de Windows SDK installeren. U moet ook begrijpen hoe u toepassingen schrijft voor de WPF. Zie Walkthrough: Mijn eerste WPF-bureaubladtoepassingvoor meer informatie over het aan de slag gaan met WPF.

Het Element InkCanvas gebruiken

Het System.Windows.Controls.InkCanvas element biedt de eenvoudigste manier om inkt te verzamelen in WPF. Gebruik een InkCanvas-element om inktinvoer te ontvangen en weer te geven. U voert vaak inkt in via het gebruik van een stylus, die communiceert met een digitaler om pennenstreken te produceren. Daarnaast kan een muis worden gebruikt in plaats van een stylus. De gemaakte pennenstreken worden weergegeven als Stroke objecten en ze kunnen zowel programmatisch als door gebruikersinvoer worden bewerkt. Met de InkCanvas kunnen gebruikers een bestaande Strokeselecteren, wijzigen of verwijderen.

Met behulp van XAML kunt u inktverzameling zo eenvoudig instellen als het toevoegen van een InkCanvas element aan uw structuur. In het volgende voorbeeld wordt een InkCanvas toegevoegd aan een standaard WPF-project dat is gemaakt in Visual Studio:

<Grid>
  <InkCanvas/>
</Grid>

Het element InkCanvas kan ook onderliggende elementen bevatten, waardoor het mogelijk is om inktaantekeningsmogelijkheden toe te voegen aan vrijwel elk type XAML-element. Als u bijvoorbeeld inktmogelijkheden wilt toevoegen aan een tekstelement, maakt u het eenvoudig een kindelement van een InkCanvas:

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

Het toevoegen van ondersteuning voor het markeren van een afbeelding met inkt is net zo eenvoudig:

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

Inktverzamelingsmodi

De InkCanvas biedt ondersteuning voor verschillende invoermodi via de eigenschap EditingMode.

Inkt bewerken

De InkCanvas biedt ondersteuning voor veel bewerkingen voor inktbewerking. InkCanvas ondersteunt bijvoorbeeld het wissen met de achterkant van de pen, en er is geen extra code nodig om die functionaliteit aan het element toe te voegen.

Selectie

Het instellen van de selectiemodus is net zo eenvoudig als het instellen van de eigenschap InkCanvasEditingMode op select.

Met de volgende code wordt de bewerkingsmodus ingesteld op basis van de waarde van een 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

Gebruik de eigenschap DrawingAttributes om het uiterlijk van pennenstreken te wijzigen. Het Color lid van DrawingAttributes stelt bijvoorbeeld de kleur van de weergegeven Strokein.

In het volgende voorbeeld wordt de kleur van de geselecteerde pennenstreken gewijzigd in rood:

// 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

De eigenschap DefaultDrawingAttributes biedt toegang tot eigenschappen zoals de hoogte, breedte en kleur van de stroken die in een InkCanvasmoeten worden gemaakt. Zodra u de DefaultDrawingAttributeshebt gewijzigd, worden alle toekomstige pennenstreken die in de InkCanvas worden ingevoerd, uitgevoerd met de nieuwe eigenschapswaarden.

Naast het wijzigen van de DefaultDrawingAttributes in het code-behind-bestand, kunt u de XAML-syntaxis gebruiken voor het opgeven van DefaultDrawingAttributes eigenschappen.

In het volgende voorbeeld ziet u hoe u de eigenschap Color instelt. Als u deze code wilt gebruiken, maakt u een nieuw WPF-project met de naam HelloInkCanvas in Visual Studio. Vervang de code in het bestand MainWindow.xaml door de volgende code:

<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>

Voeg vervolgens de volgende knop gebeurtenis-handlers toe aan de code achter het bestand, in de MainWindow-klasse:

// 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;
}

Nadat u deze code hebt gekopieerd, drukt u op F5- in Visual Studio om het programma uit te voeren in het foutopsporingsprogramma.

U ziet hoe de StackPanel de knoppen boven op de InkCanvasplaatst. Als u boven aan de knoppen probeert te inkten, verzamelt en geeft de InkCanvas de inkt achter de knoppen weer. Dit komt doordat de knoppen broers en zussen van de InkCanvas zijn in plaats van kinderen. Bovendien zijn de knoppen hoger in de z-volgorde, zodat de inkt erachter wordt weergegeven.

Delen via