如何在HTML5画布颜色轮上添加触摸事件？

Question

我正在尝试为iOS移动设备制作HTML5 Canvas颜色选择器的触摸事件，但无法使其正常工作。

我使用了以下代码：http://www.script-tutorials.com/html5-color-picker-canvas/ 我将mousemove事件更改为touch move，但这并没有起作用。我做错了什么？

    /**
 *
 * 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颜色选择器标记：

<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>

- Caspert

Answer 1

touchmove 不是一个有效的事件名称。

你可能想要使用 touch 代替。

- Cerbrus

---

谢谢，只是在颜色轮上触摸后不会改变颜色。你知道可能是什么吗？ - Caspert

var touch = event.originalEvent.changedTouches[0];有值吗？你有收到任何错误吗？ - Cerbrus

我在手机上并没有遇到任何错误，但我认为Chrome开发工具中有一个功能，可以检查你在移动设备上所看到的元素。 - Caspert

说实话，我不太了解移动调试。 - Cerbrus

只适用于Android，我使用iOS设备进行测试，因此不兼容。 - Caspert