Since the conference app doesn't use touch that much, we're
going to have you take a look at adding touch support
to a different example. Let's take a look at how we
would code a simple drawing application on a web page. First,
let's look at this, as we would write it for the
mouse. You can see where we've hooked the mouse down, mouse
move and mouse up events. And you can see are handlers
for each one of these simply creates a new stroke and
the adds points to that stroke as we go.
Now, we'd like you to change this code to use
pointer events. Don't forget to set the touch action attribute
on the HTML element that you're using as an event
listener. We've already included the polymer polyfill, so you
don't need to worry about doing that. Just change the
event handlers to be pointer events and then make any
appropriate changes to the handlers themselves if there are any.
Como la aplicación de conferencias
no usa demasiado la función táctil,
vamos a mostrar cómo añadir soporte táctil
en un ejemplo diferente.
Veamos cómo codificaríamos
una aplicación de dibujo sencilla
para una página web.
Primero, fíjate en esto, tal cómo lo
escribiríamos con el ratón.
Puedes ver dónde hemos conectado
los eventos para subir,
bajar y mover el ratón.
Y puedes ver que estas funciones
simplemente crean un nuevo trazo
y los puntos para ese trazo
conforme nos movemos.
Ahora quiero que cambies este código
para utilizar eventos de puntero. No
olvides fijar el atributo de acción táctil
para el elemento HTML que estás usando
como detector de eventos.
Ya hemos incluido el polyfill,
así que no tienes que preocuparte de eso.
Simplemente cambia las funciones de
eventos para que sean eventos de puntero
y haz todos los cambios que sean
necesarios en las funciones, si los hay.
カンファレンスアプリでは
あまりタッチを使用しないので
別の例でタッチサポートの追加を見てみましょう
Webページで作動するシンプルな作画アプリの
コーディングを説明します
まずはマウス用のコードを見てみましょう
マウスダウン、マウスムーブ、マウスアップの
マウスイベントがここにあります
それぞれにハンドラがあります
ハンドラではシンプルにnew strokeを作成し
strokeにポイントを加えます
次はポインタイベント用に
このコードを変更してください
イベントリスナーとして使用するHTML要素に
touch-action属性を設定することを
忘れないでください
Polymer Polyfillはすでに含めてあります
ポインタイベントに対応するよう
イベントハンドラを変更してください
他にも必要があればハンドラ自体を変更してください
Como o aplicativo de conferência
não utiliza tanto o toque na tela,
vamos ter que adicionar o suporte
ao toque de tela a outro exemplo.
Vamos dar uma olhada em
como faríamos o código para um aplicativo
de desenho em uma página de internet.
faríamos o código para um aplicativo de
desenho em uma página da internet.
Primeiro, vamos olhar isto aqui,
como o faríamos para o mouse
Pode ver onde fixamos os eventos
de mouse para baixo,
movimento de mouse e mouse para cima.
E você pode ver os handlers
para cada um desses, simplesmente
criando um novo traço
e adicionam pontos a esses traços
conforme seguimos.
Agora, gostaria que você alterasse
este código para utilizar eventos
de ponteiro de mouse.
Não se esqueça de definir o atributo de
ação de toque no elemento do HTML
que está usando como um ouvinte de evento.
Nós já havíamos incluído o
polímero polyfill,
então, você não precisa se preocupar
em fazer isso.
Apenas altere os handlers de evento
para eventos de ponteiro de mouse e então faça
e então faça quaisquer alterações
nos próprios handlers, se necessárias.