Stává se to dotykovým

ReneRubalcava

<\/HEAD>

<\/P>

Už jste někdy pracovali se svou pěknou a lesklou mobilní webovou mapou a snažili se nějakým způsobem kreslit nebo vybrat položku na obrazovce, jen abyste zjistili, že nevíte, kde vaše tlusté<\/SPAN> prsty mapu vlastně dotkly? Nebylo by skvělé, kdybyste mohli nějak získat zpětnou vazbu o tom, jak s mapou interagujete? Prozradím vám jedno špinavé tajemství, je to docela snadné udělat<\/EM>.<\/P><\/P>Dotykové pocity<\/H2>Před časem mi uživatel napsal, že má problém vědět, jestli kliká na mapu tam, kde si myslí. Dotykové obrazovky na mobilních zařízeních mohou být občas rozladěné a viděl jsem i pomalejší zařízení, která byla až o palec mimo místo, kde jste si mysleli, že se dotýkáte obrazovky.<\/P><\/P>Abych s tímto problémem vypořádal, vytvořil jsem TouchWidget<\/A>. Tento widget jednoduše naslouchá událostem kliknutí na mapě a přidá malý kruh, který po půl sekundě nebo tak zmizí. Myšlenka není příliš složitá, ale může být trochu rušivé jen zobrazit a skrýt značku. Proto můžete použít některé z grafických modulů v Dojo<\/A>, aby byl přechod hezčí. Tady je skvělý malý tutoriál<\/A> o práci s animacemi Dojo.<\/P>

Tady je zdrojový kód pro 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('Musíte poskytnout objekt mapy pro použití TouchWidget');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- metody widgetu
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
 &nbsp.& nbsp.& nbsp;} ;
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
 & nbsp.;& nbsp;} ,
define([
'esri/layers/GraphicsLayer',
'esri/graphic',
'esri/symbols/SimpleMarkerSymbol',
'd dojo/on', 'dojo/fx', 'dojo/_base/fx', 'dojo/fx/easing', 
'd dojo/aspect', 'dojo/_base/Color', 
'd dojo/_base/declare', 'dojo/_base/lang', 
'd 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('Musíte poskytnout objekt mapy pro použití TouchWidget'); 
} 
if (this.map.loaded) { 
this._init(); 
} else { 
on.once(this.map,'load',hitch(this,'_init')); 
} 
}, 
// metody widgetu
_fxArgs: function(graphic) { 
return { node: graphic.getNode(), duration: this.delay,easing:easing.expoOut}; }, 
_fxToCombine: function(graphicOuter, graphicInner) { return [ coreFx.fadeOut(this._fxArgs(graphicOuter)), coreFx.fadeOut(this._fxArgs(graphicInner)) ]; }, _onAspectAfterEnd: function(graphicOuter, graphicInner) { return lang.hitch(this,function() { this.touchLayer.remove(graphicOuter); this.touchLayer.remove(graphicInner); }); }, _onTimeOut: function(graphicOuter, graphicInner) { return hitch(this,function() { var combined = this._fxToCombine(graphicOuter, graphicInner); var f = fx.combine(combined); this.own(aspect.after(f,'onEnd',hitch(this,this._onAspectAfterEnd(graphicOuter, graphicInner)))); f.play(); }); }, _onTouchClick: function(e) { var graphicOuter = new Graphic(e.mapPoint,this._symOuter); var graphicInner = new Graphic(e.mapPoint,this._symInner); this.touchLayer.add(graphicOuter); this.touchLayer.add(graphicInner); setTimeout(hitch(this,this._onTimeOut(graphicOuter,graphicInner)),this.delay); }, // soukromé metody _init: function() { this.map.addLayer(this.touchLayer); this.set('loaded',true); this.emit('load',{ }); // nastavení touch handlerů this.own(on(this.get('map'),a11yclick.click,hitch(this,'_onTouchClick'))); } }); });<\/PRE><\/P>Co tento widget dělá je nastavení vnitřního a vnějšího grafického symbolu. Velikost těchto symbolů lze definovat pomocí parametrů předaných widgetu. Také přidává vlastní vrstvu pro zobrazení těchto prvků, takže se nemusíte obávat konfliktů s tím, co se může dít na výchozí GraphicsLayer mapy.<\/P><\/P>

Animace uzlů<\/H2>Knihovna dojo/fx nezná co je Graphic z knihovny Esri, takže budete muset získat skutečný DOM uzel grafiky pro interakci. To můžete udělat pomocí metody graphic.getNode()<\/STRONG>. Nyní můžete nastavit zpoždění pomocí setTimeout<\/STRONG>, aby se dotyková značka z mapy elegantně odstranila. Jen musíte předávat grafiky v tomto řetězci metod tak, aby byly správně uvolněny.<\/P><\/P>Můžete vidět jak tento TouchWidget funguje v této ukázce<\/A>.<\/P>

<\/P>

Takže klidně se dotýkejte svých map a buďte více interaktivní. Podívejte se na <A href="http:\/\/odoe.net\/blog\/\