javascript - 如何从鼠标更改为触摸？

Question

我使用 Canvas 创建颜色选择器，并且能够获取颜色代码，但是当我以移动形式使用它时，我只能点击来选择颜色。如何更改代码，以便在移动设备中时我可以使用手指并沿着 Canvas 拖动来选择颜色？

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 。它有一个 vmousemove事件将解决跨平台问题。