Respondendo a interações com caneta (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Desenvolvimento de um aplicativo que pode criar anotações manuscritas, desenhos e anotações, com a ajuda de caneta ou stylus.

Dica  As informações neste tópico são específicas para desenvolver aplicativos da Windows Store em JavaScript.

Veja Respondendo a interações por caneta e stylus (XAML) para aplicativos da Windows Store em C++, C# ou Visual Basic.

Pré-requisitos: Se você for iniciante no desenvolvimento de aplicativos da Windows Store em JavaScript, consulte esses tópicos para ficar familiarizado com as tecnologias discutidas aqui.

Criar seu primeiro aplicativo da Windows Store em JavaScript

Mapa para os aplicativos da Windows Store usando JavaScript

Saiba mais sobre eventos com Guia de início rápido: adicionando controles HTML e manipulando eventos

Recursos de aplicativos, do início ao fim: Explore esse recurso mais profundamente como parte da nossa série sobre recursos para aplicativos, do início ao fim

Interação do usuário, do início ao fim (HTML)

Personalização da interação do usuário, do início ao fim (HTML)

Observação  

As bibliotecas de controle de plataforma (HTML e XAML) fornecem a experiência de total interação do usuário do Windows, incluindo interações padrão, efeitos físicos animados e comentários visuais. Se não precisar de suporte para interação personalizada, use esses controles internos.

Se os controles de plataforma não forem suficientes, as diretrizes a seguir para interação do usuário podem ajudá-lo a proporcionar uma experiência de interação envolvente e imersiva, consistente entre os modos de entrada. Essas diretrizes têm como foco principal a entrada por toque, mas elas ainda são relevantes para entrada por touchpad, mouse, teclado e de caneta.

• Diretrizes para interações comuns do usuário
• Diretrizes de zoom óptico e redimensionamento
• Diretrizes de movimento panorâmico
• Diretrizes de rotação
• Diretrizes do Zoom Semântico
• Diretrizes de resposta visual

Exemplos: Veja essa funcionalidade em ação em nossos Exemplos de aplicativos da Windows Store.

Exemplo de personalização da interação do usuário, do início ao fim

Entrada: amostra de recursos de dispositivo

Entrada: amostra de manipulação de eventos de ponteiros DOM

Entrada: amostra de tinta

Entrada: amostra de tinta simplificada

Visão geral

Uma caneta/stylus pode ser usada como um dispositivo apontador de precisão. Ela também pode ser um dispositivo de desenho associado com tinta digital.

A plataforma de tinta do Windows 8, juntamente com um dispositivo de caneta, oferece uma maneira natural de criar anotações manuscritas, desenhos e anotações. A plataforma dá suporte a captura de dados de tinta por entrada da digitalizadora, geração de dados de tinta, renderização desses dados como traços de tinta no dispositivo de saída, gerenciamento dos dados de tinta e reconhecimento de escrita.

Além de capturar os movimentos espaciais da caneta enquanto o usuário escreve ou desenha, seu aplicativo também pode coletar informações como pressão, forma, cor e opacidade, para oferecer experiências ao usuário que se aproximam bastante do ato de desenhar em papel com caneta esferográfica, lápis ou pincel.

Observação  A plataforma de tinta do Windows 8 também suporta entrada de outros dispositivos de entrada, inclusive digitalizadores de toque e mouses.

A precisão inerente de uma entrada com caneta é naturalmente aceita pela interface do usuário do Windows 8, que foi otimizado para a natureza imprecisa do toque. Otimize o design do seu aplicativo da Windows Store para entrada por toque e obtenha, por padrão, o suporte básico para caneta.

Para aceitar as interações da caneta em cenários que enfatizam a manipulação direta, use a interface do usuário específica da caneta para fornecer a funcionalidade equivalente aos usuários do seu aplicativo, independentemente do dispositivo que estiverem usando. Por exemplo, quando uma caneta é detectada, use uma barra de rolagem para emular o movimento panorâmico, e os botões anterior e próximo para virar as páginas de conteúdo.

Nesta seção

Tópicos relacionados

Conceitual

Reagindo à interação do usuário