0

JS小提琴链接

我正在尝试单击画布（具有线性渐变）并在单击时获取图像数据

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

问题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);
});

编辑 答案包括小提琴会更好:)

4

2 回答 2

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_RADIUS110。您可以根据需要调整这些）。为了检查鼠标是在银色部分还是彩色部分，我计算了到中心的距离。如果它小于银色圆圈的半径，你就知道它在银色圆圈中。

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来防止它们成为全球性的。

于 2014-05-29T13:48:43.507 回答
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 回答