Konva.js六边形描边颜色修改后残留问题求助

这个问题本质是矢量绘图中常见的抗锯齿像素残留——当你仅重绘单个六边形时，之前描边的半透明抗锯齿像素没有被完全清除，导致鼠标移出后还能看到红色痕迹。下面给你几个高效的解决方案，不用重绘整个图层：

方案1：重绘前先清除元素自身区域 #

很多矢量绘图库（比如你用的Konva）的形状元素都提供了clear()方法，可以先清除该元素的绘制区域，再重新绘制新的描边颜色，这样就能覆盖掉之前的残留：

hexagon.on('mouseover', function(e) {
  const shape = e.target;
  shape.stroke('red');
  shape.clear(); // 先清除当前形状的画布区域
  shape.draw();
});
hexagon.on('mouseout', function(e) {
  const shape = e.target;
  shape.stroke('gray');
  shape.clear();
  shape.draw();
});

方案2：利用元素缓存提升性能 #

如果你的场景中有数千个六边形，推荐给每个形状开启缓存。缓存会把形状渲染成一张位图，后续颜色切换时只需要更新缓存并重绘，不仅能解决残留问题，还能大幅提升重绘效率：

// 初始化六边形时开启缓存
hexagon.cache();

hexagon.on('mouseover', function(e) {
  const shape = e.target;
  shape.stroke('red');
  shape.cache(); // 更新缓存
  shape.draw();
});
hexagon.on('mouseout', function(e) {
  const shape = e.target;
  shape.stroke('gray');
  shape.cache();
  shape.draw();
});

方案3：调整描边的渲染参数 #

你还可以尝试调整描边的lineJoin和miterLimit参数，减少抗锯齿带来的边缘残留。比如把lineJoin设置为'round'，让描边的转角更平滑，残留会更不明显：

// 初始化六边形时设置
hexagon.lineJoin('round');
hexagon.miterLimit(1);

这些方法都不需要重绘整个图层，单个元素的重绘开销非常小，完全适合你有数千个元素的场景。

内容的提问来源于stack exchange，提问作者Jon Garvin