Jak dodać wydarzenie dotykowe do koła kolorów Canvas HTML5?

Question

Próbuję zrobić wydarzenie dotykowe dla telefonu komórkowego z iOS za pomocą koła kolorów Canvas HTML5, ale nie mogę go uruchomić.

używam kod: http://www.script-tutorials.com/html5-color-picker-canvas/

Zmieniłem zdarzenie mousemove do touch move ale to nie działa. Co mam nie tak?

/** 
* 
* HTML5 Color Picker 
* 
* Licensed under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Copyright 2012, Script Tutorials 
* http://www.script-tutorials.com/ 
*/ 

$(function(){ 
    var bCanPreview = true; // can preview 

    // create canvas and context objects 
    var canvas = document.getElementById('picker'); 
    var ctx = canvas.getContext('2d'); 

    // drawing active image 
    var image = new Image(); 
    image.onload = function() { 
     ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas 
    } 

    // select desired colorwheel 
    var imageSrc = 'images/colorwheel1.png'; 
    image.src = imageSrc; 

    $('#picker').touchmove(function(event) { // mouse move handler 
     event.preventDefault(); 

     var touch = event.originalEvent.changedTouches[0]; 

     if (bCanPreview) { 
      // get coordinates of current position 
      var canvasOffset = $(canvas).offset(); 
      var canvasX = Math.floor(touch.pageX - canvasOffset.left); 
      var canvasY = Math.floor(touch.pageY - canvasOffset.top); 

      // get current pixel 
      var imageData = ctx.getImageData(canvasX, canvasY, 1, 1); 
      var pixel = imageData.data; 

      // update preview color 
      var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")"; 
      $('.preview').css('backgroundColor', pixelColor); 

      // update controls 
      $('#rVal').val(pixel[0]); 
      $('#gVal').val(pixel[1]); 
      $('#bVal').val(pixel[2]); 
      $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]); 

      var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0]; 
      $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6)); 
     } 
    }); 
    $('#picker').click(function(e) { // click event handler 
     bCanPreview = !bCanPreview; 
    }); 
    $('.preview').click(function(e) { // preview click 
     $('.colorpicker').fadeToggle("slow", "linear"); 
     bCanPreview = true; 
    }); 
}); 

znaczników HTML5 koło kolorów:

<div class="container"> 

     <!-- preview element --> 
     <div class="preview"></div> 

     <!-- colorpicker element --> 
     <div class="colorpicker"> 
      <canvas id="picker" var="1" width="300" height="300"></canvas> 

      <div class="controls" style="display: none;"> 
       <div><label>R</label> <input type="text" id="rVal" /></div> 
       <div><label>G</label> <input type="text" id="gVal" /></div> 
       <div><label>B</label> <input type="text" id="bVal" /></div> 
       <div><label>RGB</label> <input type="text" id="rgbVal" /></div> 
      </div> 
     </div> 
    </div> 

Answer 1

touchmove nie jest poprawną nazwą zdarzenia.

Zamiast tego prawdopodobnie użyjesz touch.