如何使用jquery旋鈕在單個畫布上實現多個拱門？

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上的文件，在畫布上的代碼片段中的特定點的顏色精確元素位置。