带有jquery - Square画布的多旋钮

Question

当我使用多旋钮时，我对jQuery Knob有一个问题。

我有3个旋钮，看上去像这个演示的“不可读时钟”(，问题在演示中也是) :-

http://anthonyterrien.com/knob/

这是可行的，但画布是方形的。每个旋钮的可点击区域是一个正方形。你可以试着点击一个旋钮的左上角，右上角，左下角和右下角:这会改变小旋钮。

为了修复，我在画布中添加了角半径:-

canvas {
border-radius: 1000px;
}

现在，画布是圆的。它适用于Firefox，但不适用于Chrome或Safari。

您可以尝试移动Firefox和Chrome上的红色旋钮(最后更新)：

http://jsfiddle.net/5ypYj/452/

你有其他的想法，使画布圈或其他任何东西，以建立一个适当的可点击区域？

Answer 1

我用this post解决了这个问题。

这不是同一个问题，但答案也解决了我的问题。我必须更改索引值。

$('.dial').parent('div').children('canvas').mousemove(function(event) {
        $.each($('.dial').parent('div').children('canvas'), function(key, value) {
            var canvas = value;
            var context = canvas.getContext('2d');      
            var position = getElementPosition(canvas);
            var x = event.pageX - position.x;
            var y = event.pageY - position.y;
            var color = context.getImageData(x, y, 1, 1).data;
            if(color[0] == 0 && color[1] == 0 && color[2] == 0) {
                $(canvas).parent('div').parent('div').css('z-index', '1');      
            }else {
                $(canvas).parent('div').parent('div').css('z-index', '2');
                testi();
            }
        });
    });

function getElementPosition(element) {
    var currentLeft = 0;
    var currentTop = 0;
    if(element.offsetParent) {
        do {
            currentLeft += element.offsetLeft;
            currentTop += element.offsetTop;
        }while(element = element.offsetParent);

        return { x: currentLeft, y: currentTop };
    }
    return undefined;
}

小提琴更新为一个适当的可点击区域多旋钮：http://jsfiddle.net/5ypYj/455/

(谢谢Kesavan ;)