Question

当我使用多旋钮时，我遇到了jQuery Knob的问题。

我有3个旋钮，看起来像是不可读的时钟＆＃34;这个演示（问题在演示中）： -

http://anthonyterrien.com/knob/

这样可行，但画布是方形的。每个旋钮的可点击区域是正方形。您可以尝试单击旋钮的左上角，右上角，左下角和右下角：更改较小的旋钮。

为了解决这个问题，我已将角半径添加到画布： -

timeText

现在，画布是圆圈。它适用于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;
}

使用multiknob更新了适当的可点击区域：http://jsfiddle.net/5ypYj/455/

谢谢Kesavan;）

带有jquery的多旋钮 - 方形帆布

1 个答案: