0

JSフィドルリンク

キャンバス（線形グラデーションを持つ）をクリックしようとしており、クリックした時点で画像データを取得しています

また、その（クリック）ポイントに相対的に配置された黄色（ピッカー）を配置したい

問題1：下部（白）をクリックすると、色の値が間違っています

問題 2: 黄色 (ピッカー) がクリック ポイントに正確に配置されていない

注 :border-radius: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);
});

フィドルを含む編集 回答の方が良いでしょう:)

4

2 に答える 2

0

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
}
于 2014-05-29T12:54:02.857 に答える