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.