Coletar tinta

Artigo
10/18/2023

A plataforma Windows Presentation Foundation coleta tinta digital como uma parte importante da sua funcionalidade. Este tópico discute métodos para coleta de tinta no Windows Presentation Foundation (WPF).

Pré-requisitos

Para usar os exemplos a seguir, você deve primeiro instalar o Visual Studio e o SDK do Windows. Você também deve entender como escrever aplicativos para o WPF. Para obter mais informações sobre como começar a usar o WPF, consulte Passo a passo: Meu primeiro aplicativo de área de trabalho WPF.

Usar o elemento InkCanvas

O System.Windows.Controls.InkCanvas elemento fornece a maneira mais fácil de coletar tinta no WPF. Use um InkCanvas elemento para receber e exibir entrada de tinta. Você normalmente insere tinta usando uma caneta, que interage com um digitalizador para produzir traços de tinta. Além disso, um mouse pode ser usado no lugar de uma caneta. Os traçados criados são representados como Stroke objetos e podem ser manipulados programaticamente e pela entrada do usuário. O InkCanvas permite que os usuários selecionem, modifiquem ou excluam um Strokearquivo .

Usando XAML, você pode configurar a coleção de tinta tão facilmente quanto adicionar um elemento InkCanvas à sua árvore. O exemplo a seguir adiciona um a um InkCanvas projeto WPF padrão criado no Visual Studio:

<Grid>
  <InkCanvas/>
</Grid>

O elemento InkCanvas também pode conter elementos filho, tornando possível adicionar recursos de anotação de tinta a praticamente qualquer tipo de elemento XAML. Por exemplo, para adicionar recursos de tinta digital a um elemento de texto, basta torná-lo filho de um InkCanvas:

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

Adicionar suporte para marcar uma imagem com tinta é igualmente fácil:

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

Modos de InkCollection

O InkCanvas fornece suporte para vários modos de entrada através de sua EditingMode propriedade.

Manipular tinta

O InkCanvas fornece suporte para muitas operações de edição de tinta. Por exemplo, InkCanvas suporta o apagamento de back-of-pen e nenhum código adicional é necessário para adicionar a funcionalidade ao elemento.

Seleção

Definir o modo de seleção é tão simples quanto definir a InkCanvasEditingMode propriedade como Selecionar.

O código a seguir define o modo de edição com base no valor de um 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

Use a propriedade para alterar a DrawingAttributes aparência dos traços de tinta. Por exemplo, o Color membro de DrawingAttributes define a cor do renderizado Stroke.

O exemplo a seguir altera a cor dos traçados selecionados para vermelho:

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

A DefaultDrawingAttributes propriedade fornece acesso a propriedades como altura, largura e cor dos traçados a serem criados em um InkCanvasarquivo . Depois de alterar o DefaultDrawingAttributes, todos os traçados futuros inseridos InkCanvas no são renderizados com os novos valores de propriedade.

Além de modificar o no arquivo code-behind, você pode usar a DefaultDrawingAttributes sintaxe XAML para especificar DefaultDrawingAttributes propriedades.

O próximo exemplo demonstra como definir a Color propriedade. Para usar esse código, crie um novo projeto WPF chamado "HelloInkCanvas" no Visual Studio. Substitua o código no arquivo MainWindow.xaml com o seguinte código:

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

Em seguida, adicione os seguintes manipuladores de eventos de botão ao arquivo code-behind, dentro da 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;
}

Depois de copiar esse código, pressione F5 no Visual Studio para executar o programa no depurador.

Observe como os botões são StackPanel colocados em cima do InkCanvas. Se você tentar pintar sobre a parte superior dos botões, o coleta InkCanvas e renderiza a tinta atrás dos botões. Isso porque os botões são irmãos do InkCanvas e não das crianças. Além disso, os botões estão mais altos na ordem z, de modo que a tinta é renderizada atrás deles.

Compartilhar via