我如何从鼠标换到另一个触摸呢？

Question

我使用画布创建一个颜色选择器，并能够得到颜色代码，但当我使用它的移动形式，我只能点击选择颜色。我如何改变代码，以便在移动时，我可以用我的手指和拖动画布来选择颜色？

var canvas = document.getElementById("picker");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 100;
var counterClockwise = false;

for(var angle=0; angle<=360; angle+=1){
    var startAngle = (angle-2)*Math.PI/180;;
    var endAngle = angle * Math.PI/180;
    context.beginPath();
    context.moveTo(x, y);
    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
    context.closePath();
    context.fillStyle = 'hsl('+angle+', 100%, 50%)';
    context.fill();
}


function createColorWheel(){
    var ctx = document.getElementById('picker').getContext('2d');
   ctx.canvas.addEventListener('mousemove',function(e){
       // Set the offset for canvas x and y                                           
    var X =  e.clientX - ctx.canvas.offsetLeft;
       var Y = e.clientY - ctx.canvas.offsetTop;
    // Get Image Data Object of pixel currently under crosshair
    var imageData = ctx.getImageData(X, Y, 1, 1);
    // Set pixel to the data array (r, g, b, a)
       var pixel = imageData.data; 
    // Add leading zero to number
    // Convert  number to a hexadecimal string with .toString(16)
    // Get the last 2 digits of that string with .slice
    var r = ("0" + (pixel[0]).toString(16)).slice(-2);
    var g = ("0" + (pixel[1]).toString(16)).slice(-2);
    var b = ("0" + (pixel[2]).toString(16)).slice(-2);
    htmlHex = "#"+r+g+b;
    // Change background color of the canvas as the mouse moves
    var previewColor = document.getElementById('picker').style.background = htmlHex;
   });        
}

window.onload = createColorWheel; 

Answer 1

问题是移动设备会触发触摸事件而不是鼠标事件。在您的情况下，您应该在移动设备上使用touchmove事件。

您可以通过更改事件侦听器使代码适用于触摸事件。请注意，使用changedTouches属性检索触摸位置。

ctx.canvas.addEventListener('touchmove',function(e){                                  
    var X =  e.changedTouches[0].clientX - ctx.canvas.offsetLeft;
    var Y = e.changedTouches[0].clientY - ctx.canvas.offsetTop;
    //........

如果您需要代码为多个平台工作，您可能需要做一些更多的编码来处理不同平台上的不同事件。

处理跨平台事件的一个简单解决方案是使用jQueryMobile。它有一个摩丝情怀事件，它将处理跨平台问题。