Coleta de tinta
A plataforma Windows Presentation Foundation coleta tinta digital como uma parte principal de sua funcionalidade. Este tópico discute os métodos para coleta de tinta no Windows Presentation Foundation (WPF).
Pré-requisitos
Para usar os exemplos a seguir, você deve primeiro instalar Microsoft Visual Studio 2005 e o Windows SDK. Você também deve compreender como escrever aplicativos para o WPF. Para obter mais informações sobre guia de Introdução com WPF, consulte Getting Started with Windows Presentation Foundation.
Usando o elemento InkCanvas
O elemento InkCanvas provê a maneira mais fácil para coletar tinta no WPF. O elemento InkCanvas é semelhante ao objeto InkOverlay do Tablet PC SDK 1.7 e versões anteriores.
Use um elemento InkCanvas para receber e exibir a entrada de tinta. Você normalmente fornece tinta de entrada por meio 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ços criados são representados como objetos Stroke, e podem ser manipulados por meio de programação e por entrada do usuário. O InkCanvas permite que os usuários selecionem, modifiquem ou excluam um Stroke existente.
Usando XAML, você pode configurar a coleta de tinta tão facilmente quanto adicionando um elemento InkCanvas à sua árvore. O exemplo a seguir adiciona um InkCanvas a um projeto WPF padrão criado no Microsoft Visual Studio 2005.
<Grid>
<InkCanvas/>
</Grid>
O elemento InkCanvas também pode conter elementos filhos, tornando possível adicionar recursos de anotação a tinta a quase qualquer tipo de elemento XAML. Por exemplo, para adicionar recursos de tinta a um elemento de texto, simplesmente faça-o um filho de um InkCanvas.
<InkCanvas>
<TextBlock>Show text here.</TextBlock>
</InkCanvas>
Adicionar suporte para marcação em uma imagem com tinta é tão fácil.
<InkCanvas>
<Image Source="myPicture.jpg"/>
</InkCanvas>
Modos InkCollection
O InkCanvas oferece suporte para vários modos de entrada pela sua propriedade EditingMode.
Manipulação de tinta
O InkCanvas oferece suporte a muitas operações de edição de tinta. Por exemplo, InkCanvas oferece suporte a apagar com a traseira da caneta sem código adicional necessário para adicionar a funcionalidade ao elemento.
Selection
Configurar modo de seleção é tão simples quanto a definição da propriedade InkCanvasEditingMode para 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 CBool(cbSelectionMode.IsChecked) Then
theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If
// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}
DrawingAttributes
Use a propriedade DrawingAttributes para alterar a aparência das pinceladas de tinta. Por exemplo, o membro Color de DrawingAttributes define a cor do Stroke renderizado. O exemplo a seguir altera a cor dos traços selecionados para vermelho.
' 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
// 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;
}
}
DefaultDrawingAttributes
A propriedade DefaultDrawingAttributes fornece acesso a propriedades tal como altura, largura e cor dos traços a serem criados em um InkCanvas. Depois que você altera o DefaultDrawingAttributes, todos os traços futuros inseridos no InkCanvas são renderizados com os novos valores de propriedade.
Além de modificar o DefaultDrawingAttributes em um arquivo de código de lógica, você pode usar sintaxe XAML para especificar as propriedades DefaultDrawingAttributes. O código XAML a seguir demonstra como definir a propriedade Color. Para usar esse código, crie um novo WPFprojeto chamado "HelloInkCanvas" em Visual Studio 2005. Substitua o código no arquivo Window1.XAML com o código a seguir.
<Window x:Class="Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
<Window x:Class="HelloInkCanvas.Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 de código de lógica, dentro da classe Window1.
' Set the EditingMode to ink input.
Private Sub Ink(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a red pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = False
inkCanvas1.DefaultDrawingAttributes.Height = 2
End Sub 'Ink
' Set the EditingMode to highlighter input.
Private Sub Highlight(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a highlighter pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = True
inkCanvas1.DefaultDrawingAttributes.Height = 25
End Sub 'Highlight
' Set the EditingMode to erase by stroke.
Private Sub EraseStroke(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke
End Sub 'EraseStroke
' Set the EditingMode to selection.
Private Sub [Select](ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Select
End Sub 'Select
// 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;
}
Após copiar esse código, pressione F5 no Microsoft Visual Studio 2005 para executar o programa no depurador.
Observe como o StackPanel coloca os botões na parte superior do InkCanvas. Se você tentar pintar a parte superior dos botões, o InkCanvas coleta e processa a tinta atrás dos botões. Isso ocorre porque os botões são irmãos de InkCanvas ao invés de filhos. Além disso, os botões estão mais altos em ordem z, então a tinta é processada por trás deles.
Consulte também
Referência
DefaultDrawingAttributes()