Cách thêm sự kiện chạm vào bánh xe màu HTML5 Canvas?

Question

Tôi đang cố gắng tạo sự kiện cảm ứng cho điện thoại di động iOS với bánh xe màu HTML5 Canvas, nhưng không thể làm cho nó hoạt động.

tôi sử dụng mã của: http://www.script-tutorials.com/html5-color-picker-canvas/

Tôi đã thay đổi sự kiện mousemove-touch move nhưng điều này không làm việc. Tôi làm gì sai?

/** 
* 
* 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; 
    }); 
}); 

HTML5 đánh dấu bánh xe màu:

<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 không phải là một tên sự kiện hợp lệ.

Bạn có thể muốn sử dụng touch, thay vào đó.