Shromáždit rukopis

Článek
10/18/2023

Platforma Windows Presentation Foundation shromažďuje digitální rukopis jako základní součást svých funkcí. Toto téma popisuje metody pro kolekci rukopisu ve Windows Presentation Foundation (WPF).

Předpoklady

Pokud chcete použít následující příklady, musíte nejprve nainstalovat Sadu Visual Studio a sadu Windows SDK. Měli byste také pochopit, jak psát aplikace pro WPF. Další informace o tom, jak začít s WPF, naleznete v návodu : Moje první desktopová aplikace WPF.

Použití elementu InkCanvas

Tento System.Windows.Controls.InkCanvas prvek představuje nejjednodušší způsob, jak shromažďovat rukopis ve WPF. Pomocí elementu InkCanvas můžete přijímat a zobrazovat vstup rukopisu. Rukopis obvykle zadáte pomocí pera, který komunikuje s digitizátorem a vytváří tahy rukopisem. Kromě toho lze myš použít místo pera. Vytvořené tahy jsou reprezentovány jako Stroke objekty a mohou být manipulovány programově i uživatelským vstupem. Umožňuje InkCanvas uživatelům vybrat, upravit nebo odstranit existující Stroke.

Pomocí XAML můžete nastavit kolekci rukopisu stejně snadno jako přidání prvku InkCanvas do stromu. Následující příklad přidá InkCanvas do výchozího projektu WPF vytvořeného v sadě Visual Studio:

<Grid>
  <InkCanvas/>
</Grid>

InkCanvas element může také obsahovat podřízené elementy , což umožňuje přidat funkce rukopisné poznámky téměř k libovolnému typu elementu XAML. Pokud například chcete do textového prvku přidat možnosti rukopisu, jednoduše ho nastavte jako podřízenou InkCanvas:

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

Přidání podpory pro označení obrázku rukopisem je stejně snadné:

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

Režimy InkCollection

Poskytuje InkCanvas podporu pro různé režimy vstupu prostřednictvím své EditingMode vlastnosti.

Manipulace s rukopisem

Poskytuje InkCanvas podporu pro mnoho operací úprav rukopisu. Podporuje například InkCanvas mazání pomocí zadního pera a k přidání funkce do elementu není potřeba žádný další kód.

Výběr

Nastavení režimu výběru je stejně jednoduché jako nastavení InkCanvasEditingMode vlastnosti Vybrat.

Následující kód nastaví režim úprav na základě hodnoty 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

DrawingAttributes Pomocí vlastnosti můžete změnit vzhled tahů inkoustem. Například Color člen DrawingAttributes nastaví barvu vykresleného Strokeobjektu .

Následující příklad změní barvu vybraných tahů na červenou:

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

Vlastnost DefaultDrawingAttributes poskytuje přístup k vlastnostem, jako je výška, šířka a barva tahů, které mají být vytvořeny v objektu InkCanvas. Jakmile změníte DefaultDrawingAttributes, všechny budoucí tahy zadané do objektu InkCanvas se vykreslí s novými hodnotami vlastností.

Kromě úpravy DefaultDrawingAttributes v souboru kódu na pozadí můžete k určení DefaultDrawingAttributes vlastností použít syntaxi XAML.

Další příklad ukazuje, jak nastavit Color vlastnost. Pokud chcete tento kód použít, vytvořte v sadě Visual Studio nový projekt WPF s názvem HelloInkCanvas. Nahraďte kód v souboru MainWindow.xaml následujícím kódem:

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

Dále přidejte následující obslužné rutiny událostí tlačítka do kódu za souborem uvnitř MainWindow třídy:

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

Po zkopírování tohoto kódu stisknutím klávesy F5 v sadě Visual Studio spusťte program v ladicím programu.

Všimněte si, jak StackPanel jsou tlačítka navrchu InkCanvas. Pokud se pokusíte rukopisit přes horní část tlačítek, InkCanvas shromáždí a vykreslí rukopis za tlačítky. Je to proto, že tlačítka jsou na stejné úrovni než podřízené InkCanvas položky. Tlačítka jsou také vyšší v pořadí vykreslování, takže rukopis se vykresluje za nimi.

Sdílet prostřednictvím