Coletar tinta

Artigo
12/17/2024

A plataforma Windows Presentation Foundation coleta tinta digital como parte central de 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 desktop WPF.

Usar o elemento InkCanvas

O elemento System.Windows.Controls.InkCanvas fornece a maneira mais fácil de coletar tinta no WPF. Use um elemento InkCanvas para receber e exibir a entrada de tinta. Normalmente, você insere tinta através do uso de 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 objetos Stroke e podem ser manipulados tanto programaticamente quanto pela entrada do usuário. O InkCanvas permite que os usuários selecionem, modifiquem ou excluam um Strokeexistente.

Usando XAML, pode configurar a recolha de tinta tão facilmente como adicionar um elemento InkCanvas à sua árvore. O exemplo a seguir adiciona um InkCanvas a um 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 funcionalidades de escrita a um elemento de texto, basta que o torne um elemento 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 Recolha de Tinta

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

Manipular tinta

O InkCanvas fornece suporte para muitas operações de edição de tinta. Por exemplo, InkCanvas suporta apagamento de parte traseira da caneta 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 propriedade InkCanvasEditingMode como Select.

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

Atributos de Desenho

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

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

Atributos de Desenho Padrão

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

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

O próximo exemplo demonstra como definir a propriedade Color. Para usar esse código, crie um novo projeto WPF chamado "HelloInkCanvas" no Visual Studio. Substitua o código no ficheiro MainWindow.xaml pelo 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 o StackPanel coloca os botões na parte superior do InkCanvas. Se tentares passar tinta sobre os botões, o InkCanvas capta e renderiza a tinta por trás dos botões. Isso ocorre porque os botões são irmãos da InkCanvas em oposição às crianças. Além disso, os botões têm uma posição mais elevada na ordem Z, de modo que a tinta é renderizada atrás deles.

Partilhar via