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

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

[canvas] [1]

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

Answer 1

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

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

这是一个代码示例：

HTML

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用于文档中的确切元素位置和canvas代码片段中特定点的颜色。