可在Chrome中点击的圆形画布角

Question

我有两幅画布。我使用border-radius将它们变成了圆形。第二个位于第一个位置（使用绝对位置）。

我在两个圈子上都有点击事件。如果单击画布内部，则单击点处的颜色将加载到外部画布中，不透明度从白色变为拾取的颜色，最后变为黑色。如果单击外部画布，则该点的确切颜色值将加载到底部的文本框中

使用chrome 时，我无法点击外部画布的红色区域（如下图所示）。我尝试了z-idex，arcs，但没有什么能帮助我。 但在Firefox中，一切正常。

注意：您可以在外圈中拖动选取器对象。但如果您将其留在红色区域，则无法在Chrome中再次点击它。点击绿色区域将再次获得控制权

Code in this JSFiddle

修改

我排除了所有不相关的代码以简化操作。现在只有一个容器有两个画布。 简单地填充两种不同的颜色。在chrome和firefox中打开以下小提琴链接。单击不同区域中的两个圆圈，查看chrome和firefox的区别。我希望他们在chrome中表现得像在firefox中一样

注意我最终会在内部画布上绘制图像。

Updated Fiddle Link

-

Answer 1

您的问题是因为画布当前总是矩形，即使它们看起来矩形。边框半径使除圆圈以外的边缘透明，但它仍然不会在角落区域的Chrome中停止事件。这就是为什么你不能点击那些区域中的底部圆圈

我even tried将其放入容器中border-radius而不是点击事件仍然通过

话虽如此，你有两种选择。您可以将代码更改为仅使用具有相同布局类型的一个画布，而只是每次在另一个之前绘制背景圆。基本上你画一个圆圈，把你的黑色绘制成颜色到白色渐变，使用xor operation将两者合并成一个圆圈，然后用雨箱渐变做同样的事情。你必须首先绘制背景圆，因为画布每次都涂在旧图层上

或

你可以使用javascript来检测圆形区域中的点击，只需要一点点数学运算（：此解决方案在下面的编辑中有特色

将来，CSS Shapes可能会允许画布成为非矩形元素，我实际上并不确定，但我们至少还没有这种能力

修改

好的，所以在完成你的代码后，似乎在提供解决方案之前我应该​​介绍一些事情

• 在每次运行的函数之外设置所有有限变量。这意味着你不将它们（如半径，偏移等）放入click函数或经常运行的东西，因为它们不会改变
• 你的“半径”实际上是“直径”。 .rect的格式为.rect(x, y, width (diameter of circle), height (diameter of circle))
• 几乎总是在覆盖像你这样的画布时，你想让它们具有相同的尺寸和起始位置以防止计算错误。最后，它更容易，使用javascript进行所有相对定位，而不是将其与CSS混合。但是，在这种情况下，由于您使用的是border-radius而不是arc来制作一个圆圈，请保持原样，但请使用javascript定位....
• 这个简单的东西不需要jQuery。如果您担心任何加载速度，我建议在vanilla javascript中进行，基本上只是将.click()函数更改为.onclick函数，但我现在离开了jQuery

• 您可以连续声明多个变量，而不是每次都使用以下格式声明var：

  var name1 = value1,
      name2 = value2;
  

• 具有相同值的变量，您可以这样声明：

  var name1 = name2 = sameValue;
  

• 如果孩子有position:absolute并且您希望它相对于父级定位，则父级可以有position:relative，position:fixed或position:absolute。在这种情况下，我认为你想要position:relative
• 如果您没有为变量声明var，那么它就变为全局变量（使用上面的逗号进行无冲突链接）。有关read this question
的更多信息

现在，解决方案。

在与朋友交谈后，我意识到我可以比我原先想象的更轻松地进行数学计算。我们可以计算圆的中心并使用它们的半径和一些if语句来确保点击数在边界内。

Here's the demo

在正确设置所有内容后，您可以使用以下内容来检测它是否在每个

的范围内

function clickHandler(e, r) {
    var ex = e.pageX,
        ey = e.pageY,
        // Distance from click to center
        l = Math.sqrt(Math.pow(cx - ex, 2) + Math.pow(cy - ey, 2));

    if(l > r) { // If the distance is greater than the radius
        if(r === LARGE_RADIUS) { // Outside of the large
            // Do nothing
        } else { // The corner area you were having a problem with
            clickHandler(e, LARGE_RADIUS);
        }
    } else {
        if(r === LARGE_RADIUS) { // Inside the large cirle
            alert('Outer canvas clicked x:' + ex + ',y:' + ey);
        } else { // Inside the small circle
            alert('Inner canvas clicked x:' + ex + ',y:' + ey);
        }
    }
}

// Just call the function with the appropriate radius on click
$(img_canvas).click(function(e) { clickHandler(e, SMALL_RADIUS); });    
$(wheel_canvas).click(function(e) { clickHandler(e, LARGE_RADIUS); });

希望上面的评论和代码充分理解，我尽力尽力清理它。如果您有任何疑问，请不要犹豫！