放大和缩小时如何避免画布元素中圆圈标记的不需要的填充不透明度变化？

Question

我遇到填充不透明度设置的一些奇怪行为。这发生在Circle和半圆标记上。未明确设置FillOpacity并使用默认值。

我的方案如下所述（简化版可在following JS Bin

中测试

我有超过100k的semiCircles，它们在canvas元素中定义，以便更快地渲染。

对于大于10的每个缩放级别，定义了不同的半径，以便具有可读的地图。变焦越大，半径越小。触发“zoomend”事件后，将定义当前缩放，并将相应的半径设置为圆圈：

layerSites1.eachLayer(function(layer) {
    return layer.setRadius(rad1); 
});

放大后（通常为最大值）并且当我开始缩小fillOpacity的密度变化时 - 它会变暗。即使地图移动最小，也可以修复此问题。有时，完整的圆圈具有较暗的填充容量，有时只是其中的一部分。您可以在下面找到两种情况的示例：

可以测试上面提到的JS Bin示例 - fillOpacity的更改在红色圆圈上更明显。您需要完全放大然后缩小，以便观察效果。如果第一次没有发生这种情况，请再次尝试放大然后缩小。

如果我做错了什么或者是浏览器呈现问题或其他问题，我将不胜感激。我用Chrome，Chromium，IE和Firefox测试过它。

谢谢！

Answer 1

似乎zoomend事件与实际重绘画布之间存在时间问题。也许是GitHub上值得提出的问题，但与此同时，让call stack clear然后设置半径似乎可以解决问题：

setTimeout(function() {
    layerSites1.eachLayer(function(layer) {
        return layer.setRadius(rad1);
    });
}, 0);

这是更新后的JsBin