Konvajs 形状笔触颜色在更改后仍然存在答案

【问题标题】：Konvajs shape stroke color lingers after changeKonvajs 形状笔触颜色在更改后仍然存在
【发布时间】：2018-03-23 04:58:33
【问题描述】：

我正在尝试在鼠标悬停时更改六边形的笔触颜色，然后在鼠标悬停时恢复为原始颜色。

我的问题是，如果我在更新描边颜色后只重画六边形，以前的颜色会在描边边缘徘徊。

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
});

hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
});

https://codepen.io/jsgarvin/pen/dmRJXj的演示

这里的原始颜色是灰色的，鼠标悬停时变为红色，但鼠标移出时又变回灰色，所有边缘都有红色灰尘。

如果我重绘整个图层，它似乎符合我的预期，但在我的特定用例中，我希望图层上有几千个六边形，除其他外，重绘整个图层似乎效率低下如果我只需要更新一个六边形。有没有更正确的方法可以做到这一点，我忽略了？谢谢！

【问题讨论】：

标签： konvajs

【解决方案1】：

您需要绘制图层。

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });

我在编写替代方案时发现了这一点，我在下面的 sn-p 中包含了该替代方案。它使用第二种形状，我们显示和隐藏这两种形状以提供鼠标悬停效果。我可以想象这在所有情况下都不可行，但它可能会帮助某人，所以这里是一个有效的 sn-p。

左手是从您的 Pen 复制的示例，其中包含修复程序，右手是形状切换器，只是为了好玩。

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 150
});

var layer = new Konva.Layer();
stage.add(layer);

  var c = layer.getCanvas();
  var ctx = c.getContext();

var hexagon = new Konva.RegularPolygon({
  x: 75,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });
hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
});


var hexagon2 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon2.on('mouseover', function(e) {
  e.target.visible(false);
  hexagon3.visible(true);
  layer.draw();
});

var hexagon3 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'red',
  strokeWidth: 10,
  visible: false
});

hexagon3.on('mouseout', function(e) {
  e.target.visible(false);
  hexagon2.visible(true);
  layer.draw();
});
layer.add(hexagon);
layer.add(hexagon2);
layer.add(hexagon3);
stage.draw();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>

<p>Left image is OP's version, right is shape-switching. Mouse-over the hexagons.</p>

<div id='container'></div>

【讨论】：

是的，正如我在问题中所说，绘制整个图层似乎可以工作，但这似乎效率极低。我希望有更合适的最佳实践。