Sbírat inkoust

Článek
12/18/2024

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

Požadavky

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 tématu Návod: Moje první desktopová aplikace WPF.

Použití elementu InkCanvas

Element System.Windows.Controls.InkCanvas poskytuje nejjednodušší způsob, jak shromažďovat rukopis ve WPF. K příjmu a zobrazení inkoustového vstupu použijte prvek InkCanvas. Inkoust zadáváte obvykle pomocí stylusu, který komunikuje s digitizátorem a vytváří inkoustové tahy. 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ě řízeně i uživatelským vstupem. InkCanvas umožňuje uživatelům vybrat, upravit nebo odstranit existující Stroke.

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

<Grid>
  <InkCanvas/>
</Grid>

Element InkCanvas může obsahovat také podřízené prvky, což umožňuje přidat funkce rukopisných poznámek k téměř libovolnému typu elementu XAML. Pokud například chcete do textového prvku přidat možnosti rukopisu, jednoduše ho umístěte jako podřízený prvek 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

InkCanvas poskytuje podporu pro různé vstupní režimy prostřednictvím vlastnosti EditingMode.

Manipulace s rukopisem

InkCanvas poskytuje podporu pro mnoho operací úprav rukopisu. Například InkCanvas podporuje mazání pomocí zadní strany pera a není potřeba žádný další kód k přidání této funkce do prvku.

Selekce

Nastavení režimu výběru je stejně jednoduché jako nastavení vlastnosti InkCanvasEditingMode na 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

Atributy kreslení

Pomocí vlastnosti DrawingAttributes můžete změnit vzhled tahů inkoustem. Například prvek Color sady DrawingAttributes nastaví barvu vykresleného objektu Stroke.

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é se mají vytvořit v InkCanvas. Po změně DefaultDrawingAttributesse všechny budoucí tahy zadané do InkCanvas vykreslují s novými hodnotami vlastností.

Kromě úprav DefaultDrawingAttributes v souboru kódu na pozadí můžete k určení vlastností DefaultDrawingAttributes 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 stiskněte F5 v sadě Visual Studio a spusťte program v debuggeru.

Všimněte si, jak StackPanel umísťuje tlačítka na vrchu InkCanvas. Pokud se pokusíte kreslit inkoust nad tlačítky, InkCanvas shromažďuje inkoust a vykresluje jej za tlačítky. Důvodem je to, že tlačítka jsou sourozence InkCanvas spíše než jejich potomky. Tlačítka jsou také vyšší v pořadí vrstev, takže inkoust se vykresluje za nimi.

Sdílet prostřednictvím