Получить данные изображения на холсте клика с точными координатами

JS Fiddle Link

Я пытаюсь щелкнуть холст (с линейным градиентом) и получить данные изображения в точке щелчка

Также я хочу разместить относительное положение желтого (сборщик) в этой точке (щелчка)

Проблема 1: Когда я нажимаю на нижнюю часть (белый), это дает мне неправильное значение цвета

Проблема 2: желтый (сборщик) не находится точно в точке щелчка

Примечание: холст выглядит круглым из-за радиуса границы:50%

Важная часть кода, указанного в (выше, ссылка на скрипку)

$(wheel_canvas).click(function(e)
{
    dragging = false;
    x = e.pageX;
    y = e.pageY;

    can_p = $('#wheel_canvas').offset();
    x = x - $(document).scrollLeft() - can_p.left;
    x = y - $(document).scrollTop() - can_p.top;

    $('#wheel_picker').css({'left':x+'px','top':y+'px'});
    var data=wheel_context.getImageData(x,y,1,1).data;
    pixelData = data;
    rgbString = 'rgb('+pixelData[0]+', '+pixelData[1]+', '+pixelData[2]+')';
    hex = rgb2hex(rgbString);

    $('#color').val(hex);
    $('#color').css('background',hex);

    $('#feedback').html("Coordinates : "+x+","+y+"  Color: "+hex);
});

Редактировать ответ, включая скрипку, было бы лучше:)

Источник

2 ответа

Решение

Основная проблема в том, что у вашего холста есть радиус границы. С радиусом границы, по какой-то причине, координаты мыши портятся. Вместо этого я использовал квадратный холст, но использовал arc() способ нарисовать круг.

wheel_context.fillStyle = wheel_grd;
wheel_context.beginPath();
wheel_context.arc(centerX, centerY, LARGE_RADIUS, 0, 2 * Math.PI);
wheel_context.fill();

Затем я снял меньший серебряный холст. Проблема с этим заключалась в том, что предполагалось, что события мыши не будут пузыриться (т. Е. Если вы нажмете на серебряную часть, она не будет регистрироваться как цвет) - однако, она также остановила события мыши рядом с ней (потому что, даже с радиусом границы, это было фактически квадратом согласно браузеру). Вместо этого я использовал тот же метод круга (arc) нарисовать меньший серебряный круг.

wheel_context.fillStyle = "silver";
wheel_context.beginPath();
wheel_context.arc(centerX, centerY, SMALL_RADIUS, 0, 2 * Math.PI);
wheel_context.fill();

(Прямо сейчас, LARGE_RADIUS 150 и SMALL_RADIUS это 110. Вы можете настроить их, если хотите). Чтобы проверить, была ли мышь в серебряной или цветной части, я рассчитал расстояние от центра. Если он был меньше радиуса серебряного круга, вы знаете, что он был в серебряном круге.

if (Math.sqrt(
            (x - centerX) * (x - centerX) + // Square of x difference
            (y - centerY) * (y - centerY)  // Square of y difference
            ) < SMALL_RADIUS) return;

Я также исправил несколько опечаток, которые мешали точной регистрации местоположения мыши.

Готовый продукт http://jsfiddle.net/kNTVZ/

Примечание. Многие ваши переменные не были правильно определены. Тебе необходимо var чтобы они не были глобальными.

Источник

pageX а также pageY иногда ненадежны кросс-браузер.

Поскольку вы уже используете jQuery, попробуйте использовать его для нормализации вашего события:

$(wheel_canvas).click(function(e)
{
    e = e || window.event;
    e = jQuery.event.fix(e);    

    dragging = false;    
    x = e.pageX;
    y = e.pageY;

    // ... rest of code
}
Источник
Другие вопросы по тегам