我如何从鼠标改为触摸？答案

【问题标题】：How do i change from mouse to touch instead?我如何从鼠标改为触摸？
【发布时间】：2015-06-30 03:31:33
【问题描述】：

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

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;

【问题讨论】：

标签： javascript html touch color-picker

【解决方案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 事件来处理跨平台问题。

【讨论】：