首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何避免画布元素中圆形标记在缩放时不必要的填充不透明变化?

如何避免画布元素中圆形标记在缩放时不必要的填充不透明变化?
EN

Stack Overflow用户
提问于 2018-04-11 14:19:51
回答 1查看 427关注 0票数 2

我正在经历一些奇怪的行为填充不透明设置。这发生在圆圈和半圆标记上。FillOpacity没有显式设置,而是使用默认值。

下面描述了我的场景(简化版本可以在跟随JS Bin中进行测试)

我有超过100 k的semiCircles,它们是在画布元素中定义的,以便更快地呈现。

对于每个缩放级别大于10个不同的半径是定义的,以便有一个可读的地图。变焦越高,半径越小。在触发“缩放”事件后,定义当前缩放,并将相应的半径设置为圆圈,其中:

代码语言:javascript
代码运行次数:0
运行
复制
layerSites1.eachLayer(function(layer) {
    return layer.setRadius(rad1); 
});

在放大(通常达到最大值)之后,当我开始放大fillOpacity的密度时,它会变得更暗。这是可以修复的,即使是最小的移动地图。有时整个圆圈是与较暗的fillOpacity,有时只是其中的一部分。下面可以找到这两种情况的示例:

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

无论是做错了什么,还是浏览器呈现问题,还是其他问题,我都会感谢您的任何建议。我用Chrome、Chrome、IE和Firefox进行了测试。

谢谢!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-12 08:19:41

zoomend事件和画布的实际重绘之间似乎存在时间问题。也许有一个问题值得在GitHub上提出来,但在此期间,让调用堆栈清除 --然后设置半径--似乎起了作用:

代码语言:javascript
代码运行次数:0
运行
复制
setTimeout(function() {
    layerSites1.eachLayer(function(layer) {
        return layer.setRadius(rad1);
    });
}, 0);

这里有一个更新的JsBin

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49777540

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档