带 jquery 的多旋钮 - 方形 canvas

Question

我在使用多旋钮时遇到 jQuery 旋钮问题。

我有 3 个旋钮，看起来像这个演示的 "the unreadable clock"（问题也在演示中）:-

http://anthonyterrien.com/knob/

这行得通，但是 canvas 是方形的。每个旋钮的可点击区域是一个正方形。您可以尝试单击旋钮的左上角、右上角、左下角和右下角：这会更改较小的旋钮。

为了修复它，我在 canvas 中添加了圆角半径：-

canvas {
border-radius: 1000px;
}

现在，canvas 是圆圈。它适用于 Firefox，但不适用于 Chrome 或 Safari。

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

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

您是否有其他想法制作 canvas 圆圈或其他任何东西来制作合适的可点击区域？

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;
}

Fiddle 更新了带有多旋钮的正确可点击区域：http://jsfiddle.net/5ypYj/455/

谢谢 Kesavan ;)

带 jquery 的多旋钮 - 方形 canvas

Multi-knob with jquery - Square canvas

html

css

jquery

canvas

jquery-knob