Question

JS Fiddle Link

我正在尝试单击画布（具有线性渐变）并在单击

处获取图像数据

此外，我想在该（点击）点放置一个相对定位的黄色（选择器）

问题1：当我点击下半部分（白色）时，它给我错误的颜色值

问题2：黄色（拾取器）未完全放在点击位置

注意：由于border-radius：50％

，Canvas看起来很圆

在（小提琴链接上方）给出的代码的重要部分是

$(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);
});

修改包括小提琴在内的答案会更好：）

Answer 1

主要问题是你的画布有一个边框半径。对于边界半径，由于某种原因，鼠标坐标会搞乱。相反，我使用方形画布，但使用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来防止它们变得全球化。

Answer 2

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
}

使用精确坐标在Click Canvas上获取图像数据

2 个答案: