Question

我指的是jsfiddle以供参考。在这个蓝色拱门用旋钮减少，但其他拱门不使用旋钮。任何人都可以建议任何参考。

[画布] [1]

[1]：http://jsfiddle.net/matthias_h/L5auuagc/ enter code here

Answer 1

正如我在评论中提到的，这是一个堆叠问题。由于旋钮使用画布，因此所有画布都与position: absolute叠加在一起。因此，最重要的一个接收所有事件。

当鼠标在任何画布上移动并获得该特定位置上所有画布的颜色时，您可以做的是获取鼠标位置。如果颜色是透明/没有颜色，则通过设置负z-index将画布向下推入堆栈中。如果它有一些颜色，则通过设置正z-index来将其向上推。

以下是代码示例：

HTML

<input class="knob" type="text" value="100" data-angleOffset="120" data-angleArc="120" data-fgColor="red" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="0" data-angleArc="120" data-fgColor="green" data-displayInput="false" />
<input class="knob" type="text" value="100" data-angleOffset="240" data-angleArc="120" data-fgColor="blue" data-displayInput="false" />

JS

$(function () {
    $('.knob').knob({});
    $('.knob').parent('div').css('position', 'absolute');

    $('.knob').parent('div').children('canvas').mousemove(function(event) {
        $.each($('.knob').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').css('z-index', '-1');
            }else {
                $(canvas).parent('div').css('z-index', '1');
            }
        });
    });
});

要获得精确的鼠标位置，请使用以下函数在文档上找到canvas元素的位置：

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/k7moorthi/n8nnpyw6/5/

<强>学分：

lwburk表示文档中的确切元素位置以及画布代码段中特定点的颜色。

如何使用jquery旋钮在单个画布上实现多个拱形？

1 个答案: