Volviéndose sensible al tacto

ReneRubalcava

<\/HEAD>

<\/P>

¿Alguna vez has estado trabajando con tu bonito y reluciente mapa web móvil y tratando de hacer algún tipo de dibujo o seleccionar un elemento en la pantalla solo para darte cuenta de que no puedes saber dónde tus dedos gordos<\/SPAN> han tocado el mapa? ¿No sería genial si pudieras obtener algún tipo de retroalimentación sobre cómo estás interactuando con el mapa? Te voy a contar un secreto sucio, es bastante fácil de hacer<\/EM>.<\/P><\/P>Sensibilidad táctil<\/H2>Hace un tiempo un usuario comentó que tenía problemas para saber si estaba haciendo clic en el mapa donde pensaba. Las pantallas táctiles en dispositivos móviles pueden ser a veces caprichosas y he visto algunos dispositivos lentos estar desviados hasta una pulgada respecto a donde pensabas que estabas tocando en la pantalla.<\/P><\/P>Para lidiar con esto, hice un TouchWidget<\/A>. Lo que hace este widget es simplemente escuchar eventos de clic en el mapa y añadir un pequeño círculo, luego después de medio segundo más o menos, eliminar el marcador. La idea no es muy difícil, pero puede ser un poco chocante simplemente mostrar y ocultar un marcador. Así que puedes usar algunos de los módulos gráficos en Dojo<\/A> para hacer la transición un poco más agradable. Aquí hay un pequeño tutorial genial<\/A> sobre cómo trabajar con animaciones Dojo.<\/P>

Aquí está el código fuente para el TouchWidget<\/P>

define([
  'esri\/layers\/GraphicsLayer',
  'esri\/graphic',
  'esri\/symbols\/SimpleMarkerSymbol',
  'dojo\/on', 'dojo\/fx', 'dojo\/_base\/fx', 'dojo\/fx\/easing',
  'dojo\/aspect', 'dojo\/_base\/Color',
  'dojo\/_base\/declare', 'dojo\/_base\/lang',
  'dijit\/_WidgetBase', 'dijit\/a11yclick'
], function(
  GraphicsLayer, Graphic, SimpleMarkerSymbol,
  on, fx, coreFx, easing, aspect, Color,
  declare, lang, _WidgetBase, a11yclick
  ) {
  'use strict';
  var hitch = lang.hitch;
  return declare([_WidgetBase], {
    postCreate: function() {
      this.set('delay', this.settings.delay || 500);
      this._symInner = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.innerSize, null, new Color(this.settings.innerColor));
      this._symOuter = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, this.settings.outerSize, null, new Color(this.settings.outerColor));
      this.touchLayer = new GraphicsLayer();
    },
    startup: function() {
      if (!this.map) {
        this.destroy();
        throw new Error('Debe proporcionar un objeto map para usar TouchWidget');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- métodos del widget
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
      };
 &nbsp.&nbpsp;},