Wordt aanraakgevoelig

ReneRubalcava

<\/HEAD>

<\/P>

Heb je ooit gewerkt met je mooie en glanzende mobiele webkaart en geprobeerd iets te tekenen of een item op het scherm te selecteren, om dan te beseffen dat je niet kunt zien waar je dikke<\/SPAN> vingers de kaart hebben aangeraakt? Zou het niet gaaf zijn als je op de een of andere manier feedback kon krijgen over hoe je met de kaart interacteert? Ik verklap je een vies geheimpje, het is best makkelijk om te doen<\/EM>.<\/P><\/P>Aanraakgevoelig gevoel<\/H2>Een tijdje geleden had ik een gebruiker die commentaar gaf dat ze problemen hadden om te weten of ze op de kaart klikten waar ze dachten te klikken. Touchscreens op mobiele apparaten kunnen soms lastig zijn en ik heb gezien dat sommige tragere apparaten tot wel een inch ernaast zitten waar je dacht het scherm aan te raken.<\/P><\/P>Om dit aan te pakken, heb ik een TouchWidget<\/A> gemaakt. Wat deze widget doet is simpelweg luisteren naar klikgebeurtenissen op de kaart en een kleine cirkel toevoegen, die na ongeveer een halve seconde weer wordt verwijderd. Het idee is niet zo moeilijk, maar het kan wat schokkend zijn om gewoon een marker te tonen en te verbergen. Daarom kun je enkele van de graphics modules in Dojo<\/A> gebruiken om de overgang wat mooier te maken. Hier is een leuke kleine tutorial<\/A> over het werken met Dojo-animaties.<\/P>

Hier is de broncode voor de 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('Er moet een map-object worden opgegeven om TouchWidget te gebruiken');
      }
      if (this.map.loaded) {
        this._init();
      } else {
        on.once(this.map, 'load', hitch(this, '_init'));
    },
    \/\/- widget methoden
    _fxArgs: function(graphic) {
      return {
        node: graphic.getNode(),
        duration: this.delay,
        easing: easing.expoOut
      };
 &nbsp.&nbpsp;} ,
 & nbsp ;& nbsp ; _fxToCombine : function ( graphicOuter , graphicInner ) { 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ; return [ 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ; coreFx.fadeOut ( this._fxArgs ( graphicOuter ) ) , 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ; coreFx.fadeOut ( this._fxArgs ( graphicInner ) ) 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ; ] ; 
 & nbsp ;& nbsp ; } , 
 & nbsp ;& nbsp ; _onAspectAfterEnd : function ( graphicOuter , graphicInner ) { 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ; return lang.hitch ( this , function () { 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ; this.touchLayer.remove ( graphicOuter ) ; 
 & nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ; this.touchLayer.remove ( graphicInner ) ; 
 & nbsp ;& nbpsp;} ) ; 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
 & nbpsp;} , 
});
<\ /PRE >< P > <\ /P >< P > Wat deze widget doet is het instellen van een binnen- en buiten grafisch symbool. De grootte van deze symbolen kan worden gedefinieerd via de parameters die aan de widget worden doorgegeven. Het voegt ook zijn eigen laag toe om deze functies weer te geven zodat je je geen zorgen hoeft te maken over conflicten met wat er mogelijk gebeurt op de standaard GraphicsLayer van de kaart.<\ /P >< P > <\ /P >< H2 id = "toc-hId--727367966" id = "toc-hId--727367966" > Knopen animeren <\ /H2 >< P > De dojo/fx-bibliotheek weet niet wat een Graphic van de Esri-bibliotheek is, dus je moet de daadwerkelijke DOM-knoop van de Graphic krijgen om mee te werken. Dit kun je doen via de graphic.getNode()<\ /STRONG>-methode. Nu kun je een vertraging instellen met behulp van setTimeout<\ /STRONG> om de aanraking marker netjes van de kaart te verwijderen. Je hoeft alleen maar de graphics door deze keten van methoden door te geven zodat ze correct worden verwijderd.<\ /P >< P > <\ /P >< P > Je kunt zien hoe deze TouchWidget werkt in 

deze demo <\ /A > .<\ /P >< P > <\ /P >< P > Voel je dus vrij om je kaarten aan te raken en interactiever te maken. Bekijk mijn blog <\ /A > voor meer tips en trucs!<\ /P >< \BODY >< \HTML >